Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

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.

Color Picker Anatomy
  • 1: Selected color
  • 2: Color name or HEX code
  • 3: Color field
  • 4: Hue slider
  • 5: Design system accent colors
Different colors applied to cards

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.

Poor feedback provided by colors

Demo

Access the Figma file and inspect the element using Dev Mode.

Color Picker in Figma

Last Update

  • Added component to Design System.

Related

Cards

Cards are boxes that group together a set of related information …
Chips

Chips

Chips are small visual elements commonly used in user interfaces to represent discrete pieces of information …

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …

States

Color Picker 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

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

polygon-framework

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.

Color Picker Used in a Form

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.

Color Picker without a Text Field

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.

Color Picker Variations

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

Why Web Accessibility Matters - And How to Start

Why Web Accessibility Matters – And How to Start

Web accessibility is about designing inclusive digital experiences that benefit everyone, guided by four key principles and driven by the …
Writing for Everyone

Writing for Everyone: Every Word Counts in Accessibility

Writing for everyone is an essential part of any digital product. It can and does make a big difference to …

Release v1.4

Overview Compose Design has recently undergone some important updates, which means it’s time for another release note. In addition to …

Outline