Color Picker
The Color Picker is a component meant to enhance user experience through customization, by allowing the selection of colors that suit individual preferences.
- Overview
- Specs
- Guidelines
Component
As a tool designed simply to select a color, the Color Picker is a flexible component that can be integrated into many interfaces that allow or require customization.
Users can either pick from a list of pre-selected colors, or manually chose the color they want using a gradient.
- 1: Selected color
- 2: Color name or HEX code
- 3: Color field
- 4: Hue slider
- 5: Design system accent colors
Used for:
Color selection
The main function of the Color Picker is to allow users to choose colors, varying their application according to need.
Customizable content
The Color Picker allows users to customize their experience, not being limited to the colors of the Design System.
Category sorting
Allowing users to change the colors associated with the components used for categorization – such as cards and chips – can help improve their experience.
Don’t use for:
Providing feedback
Many components and patterns – such as Buttons or status indicators – use colors to provide feedback to users. Their colors should never be customizable.
Branding
Allowing users to fully customize the interface colors can break visual consistency throughout Cegid products.
Efficiency-focused tasks
Asking users to select a color can be time consuming. The Color Picker should be avoided in tasks where users are expected to finish quickly.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Added component to Design System.
Related
Chips
States
Enabled
.enabled {
label: var(--grey-8);
input-border: var(--grey-5);
input-background: var(--grey-1);
hex-code: var(--grey-9);
icon: var(--grey-8);
}Hover
.hover {
label: var(--grey-8);
input-border: var(--grey-6);
input-background: var(--grey-1);
hex-code: var(--grey-9);
icon: var(--grey-8);
}Focus
.focus{
label: var(--grey-8);
input-border: var(--theme-100);
input-background: var(--grey-1);
hex-code: var(--grey-9);
icon: var(--grey-8);
}Read Only
.read-only {
label: var(--grey-8);
input-background: var(--grey-3);
hex-code: var(--grey-9);
}Disabled
.disabled {
label: var(--grey-8);
input-border: var(--grey-4);
input-background: var(--grey-2);
hex-code: var(--grey-6);
icon: var(--grey-6);
}Sizes
Small
.small {
label: var(--label-small);
input-height: 28px;
input-border: var(--x-small-radius);
input-gap: 8px;
input-padding: var(0, --spacing-4);
selected-color-indicator: 16px;
hex-code: var(--label-small);
hex-code-padding: var(0, --spacing-4)
}Regular
.regular {
label: var(--label-regular);
input-height: 36px;
input-border: var(--x-small-radius);
input-gap: 8px;
input-padding: var(0, --spacing-4);
selected-color-indicator: 20px;
hex-code: var(--label-regular);
hex-code-padding: var(0, --spacing-4)
}Large
.regular {
label: var(--label-large);
input-height: 40px;
input-border: var(--x-small-radius);
input-gap: 8px;
input-padding: var(0, --spacing-4);
selected-color-indicator: 24px;
hex-code: var(--label-large);
hex-code-padding: var(0, --spacing-4)
}Variations
No Text Field
.no-text-field {
width: flex; /* small:56px, regular:60px, large:64px */
horizontal-padding: 8px;
object-gap: 4px;
}Dropdown
.dropdown{
padding: 12px;
vertical-gap: 20px;
gradients {
padding: 8px;
color_field {
height: 188px;
width: 188px;
}
hue_slider {
height:188px;
width: 12px;
}
}
system_colors {
padding: 8px;
color-indicator: 28px;
}
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Usage
Color Pickers are often implemented in forms in a similar way to Text Fields or SelectBoxes. This means they must be equally responsive and have their width adjusted according to the size of the interface, as well as having the correct size variation applied.
Responsiveness
The Color Picker was designed with variations that make it easier to implement in different contexts.
When it is intended to be used outside of forms or when space is limited, the text field can be omitted.
Similarly, many products will not benefit from having an overly complex color picker that includes a gradient. In fact, as mentioned in the overview, its implementation can sometimes slow users down and lead to frustration.
In such cases, it is best to limit users to a limited selection of colors, such as the accent colors in the Cegid Design System.
Show the name of the color instead of its HEX code when using Design System colors.
Add a label to the pre-selected colors when the color field and hue slider are hidden.
Case Studies
Declaração de Acessibilidade do Compose Design
Why Web Accessibility Matters – And How to Start
