Color Studio

Primary Color Selector

Dodger Blue

Selected Color

#3B82F6

Click to change

Hue (H) 217°

Saturation (S) 91%

Lightness (L) 60%

Color Formats (Editable)

HEX Color

HEX

RGB (Red, Green, Blue)

RGB

HSL (Hue, Saturation, Lightness)

HSL

CMYK (Print Standard)

CMYK

Color Name

NAME

Luminance: 0.24

Perceived Mood: Light

WCAG Accessibility & Contrast Checker

Test foreground text legibility against background colors with standard WCAG 2.1 ratios.

Text Color (Foreground)

Background Color

Preview Sample 4.52 : 1

Typography Contrast Preview

Good contrast makes reading effortless for all users, including people with vision impairments. Ensure body copy achieves at least 4.5:1 ratio.

Badge Component

Contrast Ratio

4.52 : 1

Good Contrast

AA Normal Text PASS

AA Large Text PASS

AAA Normal Text FAIL

AAA Large Text PASS

Tints, Shades & Tones Generator

Systematically calculated scale based on selected color. Click any swatch to copy its HEX value.

TINTS (MIXED WITH WHITE) 0% → 90%

SHADES (MIXED WITH BLACK) 0% → 90%

TONES (MIXED WITH GRAY #808080) 0% → 90%

Color Harmonies

Calculated color relationships based on color wheel geometry.

COMPLEMENTARY (180°)

ANALOGOUS (+30°, -30°)

TRIADIC (+120°, +240°)

SPLIT COMPLEMENTARY (+150°, +210°)

5-Color Interactive Palette Studio

Lock colors you like and generate random combinations for unlocked slots.

CSS Gradient Generator

Create linear or radial CSS gradients, customize color stops, and copy CSS directly.

Gradient Type

Angle 135°

Color Stop 1

Color Stop 2

Quick Presets

background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);