Utilities

UI Color Palette Generator

Generate a full UI color palette from any hex color with tints, shades, and WCAG contrast.

Ad • 728×90

Ad • 320×50

Primary / Brand Color

Palette Style

Tints & Shades

Tint 500

#9BCAF3

rgb(155, 202, 243)

hsl(208, 79%, 78%)

Tint 400

#6DB2EE

rgb(109, 178, 238)

hsl(208, 79%, 68%)

Tint 300

#3F9AE9

rgb(63, 154, 233)

hsl(208, 79%, 58%)

Tint 200

#1A81DB

rgb(26, 129, 219)

hsl(208, 79%, 48%)

Tint 100

#1466AD

rgb(20, 102, 173)

hsl(208, 79%, 38%)

Primary

#0F4C81

rgb(15, 76, 129)

hsl(208, 79%, 28%)

Shade 100

#0A3052

rgb(10, 48, 82)

hsl(208, 78%, 18%)

Shade 200

#041525

rgb(4, 21, 37)

hsl(209, 80%, 8%)

Shade 300

#030D17

rgb(3, 13, 23)

hsl(210, 77%, 5%)

Shade 400

#030D17

rgb(3, 13, 23)

hsl(210, 77%, 5%)

Shade 500

#030D17

rgb(3, 13, 23)

hsl(210, 77%, 5%)

Utility Suggestions

Suggested Text Color

#FFFFFF

rgb(255, 255, 255)

hsl(0, 0%, 100%)

Suggested Background

#F6F7F9

rgb(246, 247, 249)

hsl(220, 20%, 97%)

WCAG Contrast Ratio (Primary vs Text)

Aa8.86:1

vs White text

AA Large ✓AA ✓AAA ✓

Aa2.37:1

vs Black text

AA Large ✗AA ✗AAA ✗

CSS Variables

--color-primary: #0F4C81;
--color-primary-500: #9BCAF3;
--color-primary-400: #6DB2EE;
--color-primary-300: #3F9AE9;
--color-primary-200: #1A81DB;
--color-primary-100: #1466AD;
--color-primary-100: #0A3052;
--color-primary-200: #041525;
--color-primary-300: #030D17;
--color-primary-400: #030D17;
--color-primary-500: #030D17;
--color-primary-bg: #F6F7F9;
--color-primary-text: #FFFFFF;

Ad • 300×250

About this tool

How to use UI Color Palette Generator

1Pick a color using the color picker or type a hex code
2Select palette style: Monochromatic, Complementary, Triadic, or Analogous
3View all colors with hex, RGB, and HSL values — click any to copy
4Check WCAG contrast ratios for accessibility
5Click 'Copy all' to export all colors as CSS custom properties

Frequently Asked Questions

What is WCAG contrast ratio?

WCAG defines minimum contrast ratios for readable text. AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal text. This tool shows pass/fail for both standards.

What are tints and shades?

Tints are lighter versions (adding white). Shades are darker versions (adding black). Together they form a complete tonal range for a design system.

What are complementary and analogous colors?

Complementary: the color opposite on the color wheel (high contrast). Triadic: two colors 120° apart (vibrant, balanced). Analogous: colors 30° adjacent (harmonious, low-contrast).