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. Manage a color palette

Overview

A quick glance at the controller

PreviousUse the Quick Actions to createNextAdjust the scale

Last updated 2 months ago

Was this helpful?

  1. Select a configured Color theme.

  2. Adjust the Lightness scale's stops.

  3. Adjust the Chroma.

  4. Select a Distribution easing.

  5. Review the keyboard shortcuts.

  6. Run the actions:

    • Sync the local styles: Sync the color shades with the document's local styles.

    • Sync the local variables: Sync the color shades with the documents' local variables.

    • Publish palette or Synchronize palette: Publication lifecycle of the palette

  7. Watch a Preview of the palette and run:

    • Display and scores.

    • Lock the source colors.

    • Select the Color space.

    • Select a Vision simulation.

  8. Access shortcuts:

    • Open the docs.

    • Open User menu.

    • Open Help/Support menu.


  1. Add a new color to the palette.

  2. Adjust the Source colors (from the left to the right):

    • Color name.

    • Hexadecimal code.

    • Hue shifting.

    • Advanced options:

      • Chroma shifting.

      • Description.

    • Remove.


  1. Add a new theme to the palette.

  2. Adjust the Color themes (from the left to the right):

    • Theme name.

    • Palette background color.

    • Advanced options:

      • Description.

    • Remove.


  1. Adjust your Palette settings or your Preferences.

  2. Change the palette Name.

  3. Change the palette Description.

  4. Change the palette Layout.

  5. Select the Color space.

  6. Select a Vision simulation.

  7. Select the Chroma velocity.

  8. Adjust the Text light color.

  9. Adjust the Text dark color.

.

LCH
WCAG 2.1
APCA
Scale
Colors
Theme
Settings