Look Awesome

Brand

#55b7ff oklch(0.75 0.139 243)

Step	Hex	OKLCH	vs White	vs Black
Base	`#55b7ff` Copy	`oklch(0.75 0.139 243)` Copy	2.19:1 fail	9.6:1 AAA
95	`#e6f4ff` Copy	`oklch(0.96 0.021 243)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cee9ff` Copy	`oklch(0.92 0.042 243)` Copy	1.26:1 fail	16.7:1 AAA
80	`#95d0ff` Copy	`oklch(0.83 0.091 243)` Copy	1.65:1 fail	12.7:1 AAA
70	`#61b6f6` Copy	`oklch(0.75 0.125 243)` Copy	2.21:1 fail	9.5:1 AAA
60	`#369ce2` Copy	`oklch(0.67 0.139 243)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#007bbe` Copy	`oklch(0.56 0.137 243)` Copy	4.59:1 AA	4.58:1 AA
40	`#005e92` Copy	`oklch(0.46 0.113 243)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004974` Copy	`oklch(0.39 0.096 243)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003557` Copy	`oklch(0.32 0.078 243)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002036` Copy	`oklch(0.23 0.057 243)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001424` Copy	`oklch(0.18 0.045 243)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#69be57 oklch(0.72 0.162 140)

Step	Hex	OKLCH	vs White	vs Black
Base	`#69be57` Copy	`oklch(0.72 0.162 140)` Copy	2.31:1 fail	9.1:1 AAA
95	`#d9fbd2` Copy	`oklch(0.95 0.065 140)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c3f2b9` Copy	`oklch(0.91 0.089 140)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9ad98d` Copy	`oklch(0.82 0.122 140)` Copy	1.65:1 fail	12.7:1 AAA
70	`#75c065` Copy	`oklch(0.74 0.146 140)` Copy	2.21:1 fail	9.5:1 AAA
60	`#53a740` Copy	`oklch(0.65 0.162 140)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#31861b` Copy	`oklch(0.55 0.162 140)` Copy	4.59:1 AA	4.58:1 AA
40	`#1a6700` Copy	`oklch(0.45 0.146 140)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#125100` Copy	`oklch(0.38 0.124 140)` Copy	9.5:1 AAA	2.21:1 fail
20	`#0b3c00` Copy	`oklch(0.31 0.101 140)` Copy	12.7:1 AAA	1.65:1 fail
10	`#042400` Copy	`oklch(0.23 0.074 140)` Copy	16.7:1 AAA	1.26:1 fail
05	`#021700` Copy	`oklch(0.18 0.059 140)` Copy	18.7:1 AAA	1.12:1 fail

Neutral `0.014` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#ddd4cd oklch(0.88 0.014 61)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ddd4cd` Copy	`oklch(0.88 0.014 61)` Copy	1.46:1 fail	14.37:1 AAA
95	`#f5f1ee` Copy	`oklch(0.96 0.006 61)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e9e4e0` Copy	`oklch(0.92 0.008 61)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cfc8c3` Copy	`oklch(0.84 0.010 61)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b5ada7` Copy	`oklch(0.75 0.012 61)` Copy	2.21:1 fail	9.5:1 AAA
60	`#9c938d` Copy	`oklch(0.67 0.014 61)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7c746e` Copy	`oklch(0.56 0.014 61)` Copy	4.59:1 AA	4.58:1 AA
40	`#5f5852` Copy	`oklch(0.46 0.014 61)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4b443f` Copy	`oklch(0.39 0.012 61)` Copy	9.5:1 AAA	2.21:1 fail
20	`#37322e` Copy	`oklch(0.32 0.010 61)` Copy	12.7:1 AAA	1.65:1 fail
10	`#211d1a` Copy	`oklch(0.24 0.008 61)` Copy	16.7:1 AAA	1.26:1 fail
05	`#141210` Copy	`oklch(0.18 0.006 61)` Copy	18.7:1 AAA	1.12:1 fail

Success

#91cc54 oklch(0.78 0.163 131)

Step	Hex	OKLCH	vs White	vs Black
Base	`#91cc54` Copy	`oklch(0.78 0.163 131)` Copy	1.91:1 fail	10.97:1 AAA
95	`#e1facc` Copy	`oklch(0.95 0.065 131)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cef0b1` Copy	`oklch(0.92 0.090 131)` Copy	1.26:1 fail	16.7:1 AAA
80	`#aad781` Copy	`oklch(0.83 0.122 131)` Copy	1.65:1 fail	12.7:1 AAA
70	`#89bd54` Copy	`oklch(0.74 0.147 131)` Copy	2.21:1 fail	9.5:1 AAA
60	`#6ca427` Copy	`oklch(0.66 0.163 131)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#508300` Copy	`oklch(0.55 0.152 131)` Copy	4.59:1 AA	4.58:1 AA
40	`#3c6400` Copy	`oklch(0.46 0.125 131)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#2e4e00` Copy	`oklch(0.38 0.106 131)` Copy	9.5:1 AAA	2.21:1 fail
20	`#203900` Copy	`oklch(0.31 0.086 131)` Copy	12.7:1 AAA	1.65:1 fail
10	`#112200` Copy	`oklch(0.23 0.064 131)` Copy	16.7:1 AAA	1.26:1 fail
05	`#091600` Copy	`oklch(0.18 0.050 131)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#e1d948 oklch(0.87 0.160 106)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e1d948` Copy	`oklch(0.87 0.160 106)` Copy	1.48:1 fail	14.22:1 AAA
95	`#f6f4c3` Copy	`oklch(0.96 0.064 106)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ebe9a4` Copy	`oklch(0.92 0.088 106)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d2cd6c` Copy	`oklch(0.83 0.120 106)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b9b230` Copy	`oklch(0.75 0.144 106)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a09800` Copy	`oklch(0.67 0.142 106)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#7e7800` Copy	`oklch(0.56 0.120 106)` Copy	4.59:1 AA	4.58:1 AA
40	`#605b00` Copy	`oklch(0.46 0.099 106)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4b4700` Copy	`oklch(0.39 0.084 106)` Copy	9.5:1 AAA	2.21:1 fail
20	`#373400` Copy	`oklch(0.32 0.068 106)` Copy	12.7:1 AAA	1.65:1 fail
10	`#211f00` Copy	`oklch(0.23 0.050 106)` Copy	16.7:1 AAA	1.26:1 fail
05	`#141300` Copy	`oklch(0.18 0.040 106)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#e7b121 oklch(0.79 0.155 85)

Step	Hex	OKLCH	vs White	vs Black
Base	`#e7b121` Copy	`oklch(0.79 0.155 85)` Copy	1.96:1 fail	10.71:1 AAA
95	`#fff0d2` Copy	`oklch(0.96 0.043 85)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe2a5` Copy	`oklch(0.92 0.084 85)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ecc46c` Copy	`oklch(0.84 0.116 85)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d7a731` Copy	`oklch(0.75 0.139 85)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bc8e00` Copy	`oklch(0.67 0.138 85)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#957000` Copy	`oklch(0.57 0.116 85)` Copy	4.59:1 AA	4.58:1 AA
40	`#725500` Copy	`oklch(0.47 0.096 85)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5a4200` Copy	`oklch(0.39 0.081 85)` Copy	9.5:1 AAA	2.21:1 fail
20	`#423000` Copy	`oklch(0.32 0.066 85)` Copy	12.7:1 AAA	1.65:1 fail
10	`#291c00` Copy	`oklch(0.24 0.049 85)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1a1100` Copy	`oklch(0.18 0.038 85)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#c2e459 oklch(0.87 0.168 122)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c2e459` Copy	`oklch(0.87 0.168 122)` Copy	1.44:1 fail	14.54:1 AAA
95	`#e9f8c6` Copy	`oklch(0.96 0.067 122)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d9eea8` Copy	`oklch(0.92 0.092 122)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b9d473` Copy	`oklch(0.83 0.126 122)` Copy	1.65:1 fail	12.7:1 AAA
70	`#9dba3e` Copy	`oklch(0.74 0.151 122)` Copy	2.21:1 fail	9.5:1 AAA
60	`#83a000` Copy	`oklch(0.66 0.160 122)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#677e00` Copy	`oklch(0.56 0.134 122)` Copy	4.59:1 AA	4.58:1 AA
40	`#4e6000` Copy	`oklch(0.46 0.111 122)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#3c4b00` Copy	`oklch(0.39 0.094 122)` Copy	9.5:1 AAA	2.21:1 fail
20	`#2c3700` Copy	`oklch(0.32 0.076 122)` Copy	12.7:1 AAA	1.65:1 fail
10	`#192100` Copy	`oklch(0.23 0.056 122)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0f1400` Copy	`oklch(0.18 0.044 122)` Copy	18.7:1 AAA	1.12:1 fail

Unassigned

#78e5ff oklch(0.87 0.106 215)

Step	Hex	OKLCH	vs White	vs Black
Base	`#78e5ff` Copy	`oklch(0.87 0.106 215)` Copy	1.45:1 fail	14.45:1 AAA
95	`#d8f7ff` Copy	`oklch(0.96 0.034 215)` Copy	1.12:1 fail	18.7:1 AAA
90	`#b8eefc` Copy	`oklch(0.92 0.058 215)` Copy	1.26:1 fail	16.7:1 AAA
80	`#88d5e8` Copy	`oklch(0.83 0.080 215)` Copy	1.65:1 fail	12.7:1 AAA
70	`#5bbbd2` Copy	`oklch(0.74 0.096 215)` Copy	2.21:1 fail	9.5:1 AAA
60	`#2ba2bb` Copy	`oklch(0.66 0.106 215)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#008197` Copy	`oklch(0.56 0.098 215)` Copy	4.59:1 AA	4.58:1 AA
40	`#006273` Copy	`oklch(0.46 0.081 215)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004d5b` Copy	`oklch(0.39 0.068 215)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003843` Copy	`oklch(0.32 0.056 215)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002229` Copy	`oklch(0.23 0.041 215)` Copy	16.7:1 AAA	1.26:1 fail
05	`#00151b` Copy	`oklch(0.18 0.032 215)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Progress & Controls

Notifications

← Key

Key →

Source image for Sagrada Familia Nativity

Brand

Brand

Accent

Accent

Neutral · 0.014 Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

Success

Success

Warning

Warning

Danger

Danger

Unassigned

Unassigned

Unassigned

Unassigned

Neutral `0.014` Caps OKLCH Chroma (Saturation). Lower = Grayer.