Look Awesome

BrandPantone 279C

#418fde oklch(0.64 0.142 251)

Step	Hex	OKLCH	vs White	vs Black
Base	`#418fde` Copy	`oklch(0.64 0.142 251)` Copy	3.38:1 AA-lg	6.21:1 AA
95	`#e8f3ff` Copy	`oklch(0.96 0.020 251)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d3e8ff` Copy	`oklch(0.92 0.039 251)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a0cdff` Copy	`oklch(0.84 0.085 251)` Copy	1.65:1 fail	12.7:1 AAA
70	`#6eb3fc` Copy	`oklch(0.75 0.127 251)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4b99e8` Copy	`oklch(0.67 0.142 251)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#2878c5` Copy	`oklch(0.56 0.142 251)` Copy	4.59:1 AA	4.58:1 AA
40	`#005aa2` Copy	`oklch(0.46 0.136 251)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004781` Copy	`oklch(0.39 0.115 251)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003461` Copy	`oklch(0.32 0.094 251)` Copy	12.7:1 AAA	1.65:1 fail
10	`#001e3d` Copy	`oklch(0.24 0.069 251)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001329` Copy	`oklch(0.18 0.055 251)` Copy	18.7:1 AAA	1.12:1 fail

AccentPantone 224C

#eb6fbd oklch(0.71 0.176 344)

Step	Hex	OKLCH	vs White	vs Black
Base	`#eb6fbd` Copy	`oklch(0.71 0.176 344)` Copy	2.78:1 fail	7.54:1 AAA
95	`#ffedf7` Copy	`oklch(0.96 0.024 344)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdcef` Copy	`oklch(0.93 0.047 344)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb2df` Copy	`oklch(0.85 0.105 344)` Copy	1.65:1 fail	12.7:1 AAA
70	`#fa89ce` Copy	`oklch(0.77 0.159 344)` Copy	2.21:1 fail	9.5:1 AAA
60	`#e469b7` Copy	`oklch(0.69 0.176 344)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c04796` Copy	`oklch(0.59 0.176 344)` Copy	4.59:1 AA	4.58:1 AA
40	`#9e2678` Copy	`oklch(0.49 0.176 344)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#811660` Copy	`oklch(0.41 0.159 344)` Copy	9.5:1 AAA	2.21:1 fail
20	`#610b48` Copy	`oklch(0.34 0.132 344)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3e042c` Copy	`oklch(0.25 0.097 344)` Copy	16.7:1 AAA	1.26:1 fail
05	`#28041c` Copy	`oklch(0.19 0.070 344)` Copy	18.7:1 AAA	1.12:1 fail

NeutralPantone Quarry `0.0` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#98a0a5 oklch(0.70 0.012 235)

Step	Hex	OKLCH	vs White	vs Black
Base	`#98a0a5` Copy	`oklch(0.70 0.012 235)` Copy	2.66:1 fail	7.91:1 AAA
95	`#f2f2f2` Copy	`oklch(0.96 0.000 235)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e5e5e5` Copy	`oklch(0.92 0.000 235)` Copy	1.26:1 fail	16.7:1 AAA
80	`#c9c9c9` Copy	`oklch(0.84 0.000 235)` Copy	1.65:1 fail	12.7:1 AAA
70	`#aeaeae` Copy	`oklch(0.75 0.000 235)` Copy	2.21:1 fail	9.5:1 AAA
60	`#959595` Copy	`oklch(0.67 0.000 235)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#757575` Copy	`oklch(0.56 0.000 235)` Copy	4.59:1 AA	4.58:1 AA
40	`#595959` Copy	`oklch(0.46 0.000 235)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#464646` Copy	`oklch(0.39 0.000 235)` Copy	9.5:1 AAA	2.21:1 fail
20	`#333333` Copy	`oklch(0.32 0.000 235)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1e1e1e` Copy	`oklch(0.23 0.000 235)` Copy	16.7:1 AAA	1.26:1 fail
05	`#121212` Copy	`oklch(0.18 0.000 235)` Copy	18.7:1 AAA	1.12:1 fail

SuccessPantone Blarney

#00a776 oklch(0.64 0.138 164)

Step	Hex	OKLCH	vs White	vs Black
Base	`#00a776` Copy	`oklch(0.64 0.138 164)` Copy	3.09:1 AA-lg	6.79:1 AA
95	`#cffce5` Copy	`oklch(0.95 0.055 164)` Copy	1.12:1 fail	18.7:1 AAA
90	`#b4f3d5` Copy	`oklch(0.91 0.076 164)` Copy	1.26:1 fail	16.7:1 AAA
80	`#82dbb3` Copy	`oklch(0.82 0.104 164)` Copy	1.65:1 fail	12.7:1 AAA
70	`#51c294` Copy	`oklch(0.74 0.124 164)` Copy	2.21:1 fail	9.5:1 AAA
60	`#0baa78` Copy	`oklch(0.65 0.138 164)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#00865e` Copy	`oklch(0.55 0.118 164)` Copy	4.59:1 AA	4.58:1 AA
40	`#006647` Copy	`oklch(0.45 0.097 164)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#005037` Copy	`oklch(0.38 0.082 164)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003b27` Copy	`oklch(0.31 0.067 164)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002316` Copy	`oklch(0.23 0.049 164)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00160c` Copy	`oklch(0.18 0.039 164)` Copy	18.7:1 AAA	1.12:1 fail

WarningPantone 1365C

#ffb549 oklch(0.82 0.148 73)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ffb549` Copy	`oklch(0.82 0.148 73)` Copy	1.76:1 fail	11.96:1 AAA
95	`#fff0dc` Copy	`oklch(0.96 0.031 73)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe1bb` Copy	`oklch(0.92 0.060 73)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f7bf76` Copy	`oklch(0.84 0.111 73)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e3a244` Copy	`oklch(0.76 0.133 73)` Copy	2.21:1 fail	9.5:1 AAA
60	`#cc8700` Copy	`oklch(0.68 0.144 73)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#a26a00` Copy	`oklch(0.57 0.121 73)` Copy	4.59:1 AA	4.58:1 AA
40	`#7c5000` Copy	`oklch(0.47 0.100 73)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#623e00` Copy	`oklch(0.40 0.085 73)` Copy	9.5:1 AAA	2.21:1 fail
20	`#482d00` Copy	`oklch(0.32 0.069 73)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2d1a00` Copy	`oklch(0.24 0.051 73)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1d0f00` Copy	`oklch(0.18 0.040 73)` Copy	18.7:1 AAA	1.12:1 fail

DangerPantone Calypso Coral

#ee5c6c oklch(0.67 0.180 17)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ee5c6c` Copy	`oklch(0.67 0.180 17)` Copy	3.29:1 AA-lg	6.38:1 AA
95	`#ffeeee` Copy	`oklch(0.96 0.019 17)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffddde` Copy	`oklch(0.93 0.038 17)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb7b9` Copy	`oklch(0.85 0.085 17)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8d94` Copy	`oklch(0.77 0.138 17)` Copy	2.21:1 fail	9.5:1 AAA
60	`#f76473` Copy	`oklch(0.69 0.180 17)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#d14154` Copy	`oklch(0.59 0.180 17)` Copy	4.59:1 AA	4.58:1 AA
40	`#ae1a39` Copy	`oklch(0.49 0.180 17)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#8e062a` Copy	`oklch(0.41 0.162 17)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6c001c` Copy	`oklch(0.34 0.135 17)` Copy	12.7:1 AAA	1.65:1 fail
10	`#45000f` Copy	`oklch(0.25 0.099 17)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2d0208` Copy	`oklch(0.19 0.072 17)` Copy	18.7:1 AAA	1.12:1 fail

Pantone 2024C

#f87c56 oklch(0.72 0.161 38)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f87c56` Copy	`oklch(0.72 0.161 38)` Copy	2.62:1 fail	8.01:1 AAA
95	`#ffeee9` Copy	`oklch(0.96 0.020 38)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded4` Copy	`oklch(0.93 0.039 38)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a3` Copy	`oklch(0.84 0.088 38)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff906f` Copy	`oklch(0.77 0.142 38)` Copy	2.21:1 fail	9.5:1 AAA
60	`#eb714b` Copy	`oklch(0.69 0.161 38)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c74f29` Copy	`oklch(0.58 0.161 38)` Copy	4.59:1 AA	4.58:1 AA
40	`#a43000` Copy	`oklch(0.48 0.159 38)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#822400` Copy	`oklch(0.41 0.134 38)` Copy	9.5:1 AAA	2.21:1 fail
20	`#621900` Copy	`oklch(0.33 0.110 38)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3e0c00` Copy	`oklch(0.24 0.081 38)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2a0600` Copy	`oklch(0.19 0.064 38)` Copy	18.7:1 AAA	1.12:1 fail

Pantone 2655C

#9678d3 oklch(0.64 0.135 298)

Step	Hex	OKLCH	vs White	vs Black
Base	`#9678d3` Copy	`oklch(0.64 0.135 298)` Copy	3.54:1 AA-lg	5.92:1 AA
95	`#f4f0ff` Copy	`oklch(0.96 0.021 298)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e9e1ff` Copy	`oklch(0.93 0.041 298)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d2c0ff` Copy	`oklch(0.84 0.089 298)` Copy	1.65:1 fail	12.7:1 AAA
70	`#bba1f5` Copy	`oklch(0.76 0.122 298)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a385e1` Copy	`oklch(0.68 0.135 298)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#8365be` Copy	`oklch(0.58 0.135 298)` Copy	4.59:1 AA	4.58:1 AA
40	`#67489e` Copy	`oklch(0.48 0.135 298)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#523681` Copy	`oklch(0.40 0.122 298)` Copy	9.5:1 AAA	2.21:1 fail
20	`#3c2662` Copy	`oklch(0.33 0.102 298)` Copy	12.7:1 AAA	1.65:1 fail
10	`#24163e` Copy	`oklch(0.24 0.074 298)` Copy	16.7:1 AAA	1.26:1 fail
05	`#170d28` Copy	`oklch(0.19 0.054 298)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Pantone 279C

Pantone 224C

Pantone Quarry

Pantone Blarney

Pantone 1365C

Pantone Calypso Coral

Pantone 2655C

Pantone 2024C

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Pantone 279C

Pantone 224C

Pantone Quarry

Pantone Blarney

Pantone 1365C

Pantone Calypso Coral

Pantone 2655C

Pantone 2024C

Progress & Controls

Notifications

← Key

Key →

BrandPantone 279C

Brand

AccentPantone 224C

Accent

NeutralPantone Quarry `0.0` Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

SuccessPantone Blarney

Success

WarningPantone 1365C

Warning

DangerPantone Calypso Coral

Danger

Pantone 2024C

Unassigned

Pantone 2655C

Unassigned

Brand · Pantone 279C

Brand

Accent · Pantone 224C

Accent

Neutral · Pantone Quarry · 0.0 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success · Pantone Blarney

Success

Warning · Pantone 1365C

Warning

Danger · Pantone Calypso Coral

Danger

Pantone 2024C

Unassigned

Pantone 2655C

Unassigned

BrandPantone 279C

AccentPantone 224C

NeutralPantone Quarry `0.0` Caps OKLCH Chroma (Saturation). Lower = Grayer.

SuccessPantone Blarney

WarningPantone 1365C

DangerPantone Calypso Coral