Look Awesome

BrandPantone 2132C

#0758c3 oklch(0.49 0.182 259)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0758c3` Copy	`oklch(0.49 0.182 259)` Copy	6.58:1 AA	3.19:1 AA-lg
95	`#eaf2ff` Copy	`oklch(0.96 0.019 259)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d6e7ff` Copy	`oklch(0.92 0.038 259)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a9cbff` Copy	`oklch(0.84 0.082 259)` Copy	1.65:1 fail	12.7:1 AAA
70	`#7cb0ff` Copy	`oklch(0.75 0.128 259)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4e94ff` Copy	`oklch(0.67 0.174 259)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#2972df` Copy	`oklch(0.57 0.182 259)` Copy	4.59:1 AA	4.58:1 AA
40	`#0054be` Copy	`oklch(0.47 0.182 259)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004198` Copy	`oklch(0.40 0.154 259)` Copy	9.5:1 AAA	2.21:1 fail
20	`#002f72` Copy	`oklch(0.32 0.125 259)` Copy	12.7:1 AAA	1.65:1 fail
10	`#001b49` Copy	`oklch(0.24 0.092 259)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001032` Copy	`oklch(0.19 0.073 259)` Copy	18.7:1 AAA	1.12:1 fail

NeutralPantone 289C `0.062` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#0c2340 oklch(0.26 0.062 256)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0c2340` Copy	`oklch(0.26 0.062 256)` Copy	15.79:1 AAA	1.33:1 fail
95	`#e9f3ff` Copy	`oklch(0.96 0.020 256)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d7e7fc` Copy	`oklch(0.92 0.034 256)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b6cbe8` Copy	`oklch(0.84 0.046 256)` Copy	1.65:1 fail	12.7:1 AAA
70	`#97b0d2` Copy	`oklch(0.75 0.056 256)` Copy	2.21:1 fail	9.5:1 AAA
60	`#7c97bb` Copy	`oklch(0.67 0.062 256)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#5d779a` Copy	`oklch(0.56 0.062 256)` Copy	4.59:1 AA	4.58:1 AA
40	`#425b7c` Copy	`oklch(0.46 0.062 256)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#314763` Copy	`oklch(0.39 0.056 256)` Copy	9.5:1 AAA	2.21:1 fail
20	`#22344a` Copy	`oklch(0.32 0.046 256)` Copy	12.7:1 AAA	1.65:1 fail
10	`#131f2e` Copy	`oklch(0.23 0.034 256)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0b131d` Copy	`oklch(0.18 0.025 256)` Copy	18.7:1 AAA	1.12:1 fail

SuccessPantone 2420C

#00c65f oklch(0.72 0.196 151)

Step	Hex	OKLCH	vs White	vs Black
Base	`#00c65f` Copy	`oklch(0.72 0.196 151)` Copy	2.27:1 fail	9.24:1 AAA
95	`#caffd4` Copy	`oklch(0.95 0.078 151)` Copy	1.12:1 fail	18.7:1 AAA
90	`#acf6bc` Copy	`oklch(0.91 0.108 151)` Copy	1.26:1 fail	16.7:1 AAA
80	`#75df91` Copy	`oklch(0.82 0.147 151)` Copy	1.65:1 fail	12.7:1 AAA
70	`#39c66b` Copy	`oklch(0.73 0.177 151)` Copy	2.21:1 fail	9.5:1 AAA
60	`#00ac51` Copy	`oklch(0.65 0.177 151)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#00883f` Copy	`oklch(0.55 0.149 151)` Copy	4.59:1 AA	4.58:1 AA
40	`#00672e` Copy	`oklch(0.45 0.122 151)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#005123` Copy	`oklch(0.38 0.104 151)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003c18` Copy	`oklch(0.31 0.084 151)` Copy	12.7:1 AAA	1.65:1 fail
10	`#00240c` Copy	`oklch(0.23 0.062 151)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001705` Copy	`oklch(0.18 0.049 151)` Copy	18.7:1 AAA	1.12:1 fail

WarningPantone 109C

#ffd100 oklch(0.88 0.179 93)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffd100` Copy	`oklch(0.88 0.179 93)` Copy	1.46:1 fail	14.37:1 AAA
95	`#fff1c6` Copy	`oklch(0.96 0.059 93)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fce498` Copy	`oklch(0.92 0.098 93)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e8c757` Copy	`oklch(0.84 0.134 93)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d1ab00` Copy	`oklch(0.75 0.154 93)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b39200` Copy	`oklch(0.67 0.137 93)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8d7300` Copy	`oklch(0.56 0.116 93)` Copy	4.59:1 AA	4.58:1 AA
40	`#6c5700` Copy	`oklch(0.46 0.095 93)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#554400` Copy	`oklch(0.39 0.081 93)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3e3100` Copy	`oklch(0.32 0.066 93)` Copy	12.7:1 AAA	1.65:1 fail
10	`#261d00` Copy	`oklch(0.23 0.048 93)` Copy	16.7:1 AAA	1.26:1 fail
05	`#181200` Copy	`oklch(0.18 0.038 93)` Copy	18.7:1 AAA	1.12:1 fail

DangerPantone 1787C

#f4354d oklch(0.63 0.224 20)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f4354d` Copy	`oklch(0.63 0.224 20)` Copy	3.84:1 AA-lg	5.46:1 AA
95	`#ffeeed` Copy	`oklch(0.96 0.019 20)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdedc` Copy	`oklch(0.93 0.037 20)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b6` Copy	`oklch(0.85 0.084 20)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8e8e` Copy	`oklch(0.77 0.138 20)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5d67` Copy	`oklch(0.69 0.197 20)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#e41f40` Copy	`oklch(0.59 0.224 20)` Copy	4.59:1 AA	4.58:1 AA
40	`#b5002c` Copy	`oklch(0.49 0.196 20)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#900021` Copy	`oklch(0.41 0.166 20)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6c0016` Copy	`oklch(0.34 0.136 20)` Copy	12.7:1 AAA	1.65:1 fail
10	`#45000b` Copy	`oklch(0.25 0.100 20)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0005` Copy	`oklch(0.19 0.078 20)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Neutral

Success

Warning

Danger

Named Buttons

Pantone 289C

Pantone 2132C

Pantone 2420C

Pantone 109C

Pantone 1787C

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Neutral

Success

Warning

Danger

Named Badges

Pantone 289C

Pantone 2132C

Pantone 2420C

Pantone 109C

Pantone 1787C

Progress & Controls

Notifications

← Key

Key →

Brand · Pantone 2132C

Brand

Neutral · Pantone 289C · 0.062 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success · Pantone 2420C

Success

Warning · Pantone 109C

Warning

Danger · Pantone 1787C

Danger

BrandPantone 2132C

NeutralPantone 289C `0.062` Caps OKLCH Chroma (Saturation). Lower = Grayer.

SuccessPantone 2420C

WarningPantone 109C

DangerPantone 1787C