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 24

Create Color systems “like a Pro”

PreviousUI Color Palette 23NextUI Color Palette 25

Last updated 1 year ago

Was this helpful?

The Pro plan is now available for UI Color Palette! By subscribing, you will have access to additional features such as color themes, more export options, and the ability to create variables that can transform your color palette into a color system.

Upgrade now and take your color palette to the next level!

Key Feature

You can manage color themes within the same palette, allowing you to create multiple variations of lightness scales to build your color system. This feature is useful for managing both light and dark mode themes.

Additionally, local styles are grouped together by color theme, improving data organization and making it easier to navigate.

Improvements

Sync your palette with the local variables・Pro

The values of the shades can be assigned to the document's local variables. As seen in the Figma Config, variables allow for dynamic changes, increasing productivity. This feature also makes it easier to switch between modes.

Bring more information to your color palette

You can describe the palette, including its source colors and color themes. This description is reported in the local styles and variables, as well as in the global tokens file in JSON format.

Import your color palette into Tokens Studio・Pro

Export the color palette in multiple ways・Pro

Import your color palette into Amazon Style Dictionary

Declare resources for Apple and Android projects

You can export your color palette to Swift (for use in an Xcode project) and XML (for use in an Android Studio project) formats.

Transform you palette into a detailed document・Pro

The color sheet layout provides more details about usage, including recommendations on minimum font size and a structured organization.

Try the HSLuv color space

Minor Changes

  • The global tokens JSON structure now includes types.

  • The controller has been adjusted:

    • A loader has been added to indicate when the controller is loading.

    • The message ticker no longer operates on hover.

    • The "About" section has been moved to the shortcuts.

    • The Github repository of the project is easily accessible.

    • The link to create an issue has been updated.

  • The palette has been adjusted:

    • Auto Layout now uses the Wrap mode for the color sheet.

    • The text tag has larger padding.

    • The typography has been updated to Red Hat Mono.

    • A signature has been added at the bottom.

    • A message has been added to the palette that appears when there are no source colors.

  • Styles are now tracked with an ID to ensure that the name is updated correctly.

  • The license has been updated to ensure that it is up to date and compliant with current regulations.

Bug Fixes

  • You are no longer able to edit the palette by selecting a child element, preventing accidental changes.

  • You can no longer select component instances when editing the palette, preventing accidental changes.


Enjoy your updated UI Color Palette!

UI Color Palette Team

You can export your palette to JSON format to use with Tokens Studio, which adds more semantics to your shades. Learn more about .

You can export your color palette in JSON format to use with Amazon Style Dictionary, which generates stylesheets for multiple platforms. Learn more about .

The HSLuv color space has been added to the color space options, providing you with an additional choice to ensure consistency in your color scaling. To learn more about the .

Also, we want to remind you that we're always listening to your , and we've made sure to incorporate your most recent feedback into these updates to ensure that they're tailored to your needs.

You can now start a discussion to share your practices, write feedback, help the community, etc.

Besides, you can always get support by sending us an email at and help us improve the quality of UI Color Palette by .

Tokens Studio
Amazon Style Dictionary
HSLuv color space model
feedback and suggestions
Get ready to write a topic!
hello@ui-color-palette.com
reporting a bug
Page cover image