Skip to main content

Image & color

Sample from an image with the draggable pickers, or drag on the wheel to set hue for the active swatch (saturation and brightness stay the same).

Color

Drop image here or click to upload

Palette

Select a swatch, apply a harmony rule, or switch to a gradient preview.

Edit active swatch

Hex and channel sliders (RGB, HSB, or L*a*b*).

RGB

235
42
42
100%

Contrast (WCAG)

Typography color vs a swatch background. AA normal 4.5:1, large 3:1; AAA normal 7:1, large 4.5:1.

Background

Text color

Aa
  • AA normal: fail
  • AA large: pass
  • AAA normal: fail
  • AAA large: fail

Ratio: 4.16:1