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
  • Concepts
  • Color spaces gamuts
  • Color spaces models
  • Color vision deficiencies
  • Contrast ratio models

Was this helpful?

Glossary

PreviousWhy should you avoid RBG and HSL color spaces?NextOverview

Last updated 4 months ago

Was this helpful?

Concepts

Primitive colors

Color scaling is the declination of a source color to make it darker or lighter. These shades, aka Primitive colors, are consistent in contrast and lightness but still abstract and complex when applied to UI components. They can be bound as aliases in a more structured way, aka .

Semantic colors

A color system is an architecture in which each color serves a particular purpose. For example, red could warn a user, and grey could structure a layout. are picked and bound to this architecture to create Semantic ones.

Color spaces gamuts

sRGB

The sRGB gamut is a color space standard used in monitors, printers, and the internet. It defines a range of colors for accurate and consistent display. It is widely accepted and compatible with existing technologies.

P3

The P3 gamut is a color space that has more colors than sRGB and is used in high-end displays like Apple's Retina. It displays vibrant and accurate colors in movies, photos, and visual content.

D65

The D65 color space gamut is used in photography, printing, and video. It's based on CIE 1931, with a wide range of colors. D65 white point is daylight's average color, preferred for calibration. Its gamut allows for accurate and vibrant color reproduction, which is useful for visual arts professionals.

Color spaces models

CIELAB

CIELAB is a color space model based on human perception. It includes Lightness (L), red-green (A* axis), and yellow-blue (B* axis) attributes. It's used in printing, textiles, and painting for accurate color reproduction.

HSL

The HSL color space model is a type of color space commonly used in graphic design and web development. It has three axes, two of which represent Saturation (S* axis) and Lightness (L* axis), while the other represents Hue (H* axis). The hue axis is circular, which enables a full range of colors to be displayed.

HSLuv
LCH
OKLAB
OKLCH
RGB

Computers and TVs use RGB color space with primary red, green, and blue colors. Other colors are created by changing their intensity. RGB is popular in digital imaging and graphic design.

Color vision deficiencies

Protanomaly

Protanomaly is a type of color vision deficiency, often referred to as red-green color blindness. People with protanomaly have a reduced sensitivity to red light

Protanopia

Protanopia is a type of color blindness that affects the perception of red and green colors. People with protanopia have difficulty distinguishing between red, green, and brown hues

Deuteranomaly

Deuteranomaly is a type of red-green color blindness in which the green cones in the eye detect too much red light, making it difficult to distinguish between certain shades of red and green.

Deuteranopia

Deuteranopia is a type of color vision deficiency characterized by the inability to perceive green light. People with deuteranopia are unable to distinguish between green and red colors.

Tritanomaly

Tritanomaly is a type of color vision deficiency which affects a person's ability to see the color blue. It is caused by an anomaly in the "S" cone cells of the retina. People with tritanomaly have difficulty distinguishing between blue and green hues, and they may also have trouble recognizing purples.

Tritanopia

Tritanopia is a type of color blindness characterized by the inability to perceive the color blue. It is a rare form of color blindness, and those affected may have difficulty differentiating between shades of blue, yellow, and green.

Achromatomaly

Achromatomaly is a type of color vision deficiency characterized by a reduced sensitivity to light in the red and green parts of the spectrum. This condition makes it difficult to distinguish between certain colors, particularly red and green.

Achromatopsia

Achromatopsia, also known as total color blindness, is a rare, non-progressive visual disorder characterized by a complete inability to perceive colors. Individuals with achromatopsia typically experience extreme sensitivity to light and have difficulty seeing in bright environments.

Contrast ratio models

WCAG 2.1

The WCAG 2.1 defines contrast ratio as the luminance difference between colors, ensuring text readability. It mandates a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text,

APCA

The Advanced Perceptual Contrast Algorithm (APCA) calculates contrast ratios based on human visual perception, focusing on text readability by considering font weight and viewing conditions. This method aims to improve accessibility and visual comfort.

The HSLuv color space model works similarly with but with improved perceptual uniformity and a more comprehensive range of chroma values. The chroma in HSLuv is adaptive and changes depending on the lightness value, providing a more consistent and natural-looking color representation.

The LCH color space model works similarly with but with improved perceptual uniformity and a more comprehensive range of chroma values. The chroma in LCH is adaptive and changes depending on the lightness value, providing a more consistent and natural-looking color representation.

The OKLAB color space is a popular model for digital media that provides consistent results across devices and platforms. It's based on and closely matches human vision, making it useful for image processing and color grading.

The OKLCH color space model is a highly accurate color space that utilizes two Chroma (C* axis) and Lightness (L* axis) axes and one Hue rotation (H* axis), surpassing the accuracy of the color space model. It allows for precise color representation and is commonly used in color management applications.

Semantic colors
Primitive colors
HSL
HSL
CIELAB
LCH