Color Groups

Color Groups

Getting started

The Color Groups in the Loree Admin Portal now include the Global Colors customization option in the Loree Editor. The section below will provide more details on this feature. We now have two options under Color Groups: the Primary section for Global Colors and the Secondary section for Additional Custom Color Palettes.

The benefits of the color group 

Consistency: It ensures uniformity in design by using predefined color schemes across the content.
Efficiency: It allows for quick color selection, saving time in the design process.
Accessibility: It helps maintain color contrast ratios that are accessible to users with visual impairments.
Customization: It provides flexibility for users to select and adjust colors according to their brand or design preferences.

Info
Only Admin will have access to the admin portal to manage and configure color groups as needed.

Global Colors

Global Colors offers a full-color spectrum palette, allowing users to select and save any organizational or preferred colors. These saved colors can then be used within the Loree Editor for background, border, or font colors.


By clicking the (+ Add Color) icon, users can:
  • Choose a color using the color scaling tool.
  • Enter a specific Hex code.
  • Input an RGBA code.
The dropdown provides options to switch between Hex and RGBA codes for precise color customization.

Additional Custom Color Palettes

The Additional Custom Color Palettes serve as a secondary section in Loree. Here, the Loree admin can create multiple color groups within the color groups section. Admins can add colors to these groups and choose to share them either globally or with specific sub-accounts within their organization.

To create a new color palette, the admin can click on Create color palette under Color Groups.

After clicking on "Create Color Palette," a pop-up window will appear, prompting you to enter a name for the new color palette. Once the name is updated, the "Create" button will be enabled, allowing you to proceed with creating the palette.

NotesNote: The palette name must be unique. If a duplicate name is entered, the creation process will be blocked, and a message will appear indicating that the color group already exists.



When the group is created, users will get a message such as “New color group created successfully."

Once the color group is created, you can click on the (+ Add Color) icon to add colors. You have the option to select a color using the color-scaling tool, enter a specific HEX code, or input an RGBA code. The dropdown menu allows you to switch between Hex and RGBA formats.

After selecting the desired colors, click "Save" to store them within the group.


After saving the desired colors in a group palette, the admin can manage the palette by clicking the three-dot menu located on the right side of the palette. From this menu, the admin can rename, share, or delete the color palette.

The Rename option allows the admin to update the name of the color group, while the Delete option removes the palette if it is no longer needed.

Using the Share option, the admin can set the palette visibility to Private, Global, or share it with a specific sub-account:

  • When a palette is shared with a specific sub-account, the selected colors will only be available in the courses within that sub-account.

  • When set to Global, the palette becomes available for all users across the organization.

  • When marked as Private, the palette is visible only to the admin, allowing them to create and save palettes for personal use or future sharing.

 

  1. The globe icon displayed next to the palette name indicates that the palette has been shared globally.
  2. This means the palette is available for all users across the organization to use.
 
  1. The category icon displayed next to the palette name indicates that the palette has been shared with specific categories.
  2.  This means the palette will be available for use only within those shared categories.
 
  1. The lock icon displayed next to the palette name indicates that the palette is private and accessible only to the admin within the Admin Portal.
  1. Palettes marked with the lock icon will not appear in the editor unless they are shared with a specific sub-account or made global.
If a color palette is shared with particular sub-accounts, it will be only reflected in the particular sub-accounts.


Color Picker Option in Roles and Features



Advanced Option:
  1. Now the Loree admin can manage the Color Picker options from the Admin Portal→ Roles and features → Color Picker.
  2. This means, even if the admin shared the custom color groups globally or with a specific sub-account, they could manage the availability of the custom colors based on user roles.
    Ex: Admin can restrict the teachers to use Global colors and shared color groups.



  1. If the admin disables the Advanced Color Picker from the Admin Portal, the feature will be disabled for users according to their assigned roles.



  1. However, the Loree Admin also has the option to enable only the Secondary Color Palette, which allows the Advanced option to be activated specifically for the Secondary Color Palette.



  1. Alternatively, the Loree Admin can enable only the Color Picker – Custom Colors option, which allows the Advanced option to be used exclusively with the Custom Colors picker.



  1. Alternatively, the Loree Admin can enable both the Secondary Color Palette and Color Picker – Custom Colors, allowing the Advanced option to be available for both.


InfoThis new advanced Color picker design with tabs will be available on the Color picker for text, background, border, divider, table, container, rows, columns, and wherever the color picker user in Loree editor(except Loree Interactive modal).

Smart Color Picker

Loree introduces the Smart Color Picker for the instant checking of the color contrast ratio in the Design section of all the elements as well as in the Bubble Menu, as shown in the images below: 





  1. If the Contrast Ratio does not match then it will reflect as 'Fail' as shown in the image below:

  1. The Smart Color Picker provides a user-friendly alternative to the Accessibility Checker tool for addressing issues related to the contrast ratio of elements. Instead of navigating through the Accessibility Checker icon to resolve color contrast ratio problems, users can now directly check whether the ratio passes or fails.
Info
WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Refer the document
InfoThe Smart Color Picker supports both the Text Background and the Text itself, while excluding Borders
Clear Option:

The "Clear" option in the Color Picker Modal resets the styles and reverts the selected content to the default theme style.



THANK YOU




    • Related Articles

    • Release notes for Loree - Canvas A2204.02

      Loree Custom Color Management We have now updated the view of the Style manager option in the admin dashboard, Earlier we used Accordions now we are using Tabs. Earlier: Now: Custom Colors We now have two options under Customs Colors, the Primary ...

    • How can I add a divider to the page?

      Divider The divider feature allows users to clearly separate sections of a page using a line, spacing, or a line with an icon. Each option is customisable to fit your preferred style. The screenshots below demonstrate the divider feature and show the ...

    • What customisation options are available in Loree Design? (Loree Admin)

      We have two customization options available in the Loree Design Admin Dashboard. They are : 1. Fonts (Where we can customise fonts) 2. Style Manager Fonts In the world of fonts, Loree shines with a collection of over 900 Google fonts available ...

    • Loree Admin Dashboard - User Guide

      Welcome to Loree Admin Dashboard Glad! Managing Loree editor interface features via Loree Admin dashboard. Navigation to Loree Admin Dashboard Happy to help you to take a tour of the Loree Admin Dashboard! To access the Loree Admin Dashboard, ensure ...

    • Tabs

      TABS Interactive The primary goal of Tabs Interactive is to present users with a grouped view of related data, which in turn allows content builders to modularize groups of information in a compact manner, saving valuable screen real estate. Here is ...