UI Color Palette
UI Color Palette
UI Color Palette
  • Welcome aboard!
  • Why should you avoid RBG and HSL color spaces?
  • Glossary
  • Create a color palette
    • Overview
    • Select and import the source colors
      • Select colors from the document canvas
      • Import colors from external libraries
    • Choose a lightness scale preset
    • Set the scale
      • Adjust the lightness scale
      • Adjust the chroma・Pro
      • Distribute the stops・Pro
    • Configure the palette
      • Change the palette global settings
      • Select a color space
      • Select a vision simulation
      • Select a velocity
      • Lock the source colors
    • Create the palette in one single click
    • Use the Quick Actions to create
  • Manage a color palette
    • Overview
    • Adjust the scale
      • Adjust the lightness and the chroma
      • Add or remove stops in the Custom preset
    • Change the source colors
      • Add or remove a color
      • Change a color's parameters
      • Reorder the colors
    • Create color themes・Pro
      • Add or remove a theme
      • Change the themes' parameters
      • Reorder the themes
    • Manage global settings
    • Manage the colors
      • Select a color space
      • Select a vision simulation
      • Select a velocity
    • Manage the contrast
    • Update your preferences
  • Sync a color palette
    • Sync the palette to the local styles・Pro
    • Sync the palette to the local variable・Pro
  • Transfer a color palette
    • Overview
    • Export the palette
      • Export as tokens
      • Export as Custom Properties to CSS
      • Export for Apple apps (SwiftUI and UIKit)・Pro
      • Export for Android apps (Compose and Resources)・Pro
      • Export the LCH values to CSV・Pro
    • Usage in Dev Mode
  • Publish a color palette
    • Manage the palette lifecycle
    • Publish and Synchronize palettes
      • Publish palettes
      • Synchronize palettes
    • Reuse palettes across multiple documents
      • Reuse the palettes for your own usage
      • Hunt the shared palettes from the community
  • Others
    • Troubleshooting
    • Release notes
      • UI Color Palette 19
      • UI Color Palette 20
      • UI Color Palette 21
      • UI Color Palette 22
      • UI Color Palette 23
      • UI Color Palette 24
      • UI Color Palette 25
      • UI Color Palette 26
      • UI Color Palette 28
      • UI Color Palette 29
      • UI Color Palette 30
      • UI Color Palette 31
      • UI Color Palette 32
    • Legal
      • Terms and Conditions
      • Privacy Policy
      • Cookies Policy
Powered by GitBook
On this page

Was this helpful?

  1. Create a color palette

Overview

A quick glance at the controller

PreviousGlossaryNextSelect and import the source colors

Last updated 1 month ago

Was this helpful?

  1. Search for a palette.

  2. Add a palette to the file or:

    • Unpublish the palette.

    • Share or stop sharing the palette with the community.


  1. Browse the contexts:

    • Overview: Colors import and recap'.

  2. The Selected colors from the document canvas.

  3. Rename the palette and a recap' of the source colors.

  4. Watch a Preview of the palette and run:

    • Lock the source colors.

    • Select the Color space.

    • Select a Vision simulation.

  5. Access shortcuts:

    • Open the docs.

    • Open User menu.

    • Open Help/Support menu.


  1. Filter from a Colors list.

  2. Run the actions:

    1. Click the link icon to access the palette.

    2. Click Add to source to bind the source colors.


  1. Select a Lightness scale preset.

  2. Adjust the Lightness scale's stops.

  3. Adjust the Chroma.

  4. Select a Distribution easing.

  5. Review the keyboard shortcuts.

  6. Create the palette according to the Source colors, the Lightness scale and the Settings.

  7. Watch a Preview of the palette and run:

    • Lock the source colors.

    • Select the Color space.

    • Select a Vision simulation.


  1. Change the palette Name.

  2. Change the palette Description.

  3. Change the palette Layout.

  4. Select the Color space.

  5. Select a Vision simulation.

  6. Select a Chroma velocity.

  7. Adjust the Text light color.

  8. Adjust the Text dark color.

Explore: List of shared color combinations provided by the community.

Import from a palette.

Import from a simulation.

Import from a palette.

Display and scores.

Display and scores.

Colour Lovers
Coolors
Realtime Colors
Colour Lovers
WCAG 2.1
APCA
WCAG 2.1
APCA
Palettes
Source Overview
Source Explore
Scale
Settings