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
  1. Others
  2. Release notes

UI Color Palette 23

Easily manage color spaces for better color management

PreviousUI Color Palette 22NextUI Color Palette 24

Last updated 1 year ago

Was this helpful?

Key Feature

Color Spaces can be managed throughout the UI Color Palette. This allows you to select and switch between various color spaces, such as LCH, OKLCH, LAB, OKLAB, and HSL. By doing so, you can ensure that the contrast and lightness of your designs are consistent, especially when using the OKLCH and OKLAB color spaces. Furthermore, managing color spaces in the UI Color Palette provides a more efficient and streamlined workflow, allowing you to focus on the creative aspects of your design without worrying about the technical details.

Furthermore, the HSL color space lets you include the source colors in the palette, ensuring you can retrieve your brand's color references.

Improvements

Get more color models in the tokens

In the tokens (JSON export), you can access more than just the RGB, LCH, and Hex values. The following additional color values are available for various color spaces:

  • GL (useful for Apple OS color declarations).

  • OKLCH.

  • CIELAB.

  • OKLAB.

  • HSL.

Minor Changes

  • The controller displays the number of lightness stops.

  • The controller displays the number of source colors.

  • If the palette is empty, a message will invite you to add a source color.

  • Source color names are displayed at the top of the palette.

  • The lightness stop is emphasized when its input is open.

  • The exported file name will be based on the palette name.

  • The CSS Custom properties are separated by the source color name.

  • Stops are included as an object key rather than pushed into an array in the JSON export.

Bug Fixes

  • The configuration for the lightness scale is applied to the newly created palette.

  • The CSV export function works, but a warning will be returned if the palette has no source color.