Look Awesome

BrandTeal

#0e8080 oklch(0.54 0.090 195)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0e8080` Copy	`oklch(0.54 0.090 195)` Copy	4.75:1 AA	4.42:1 AA-lg
95	`#d6f9f8` Copy	`oklch(0.96 0.036 195)` Copy	1.12:1 fail	18.7:1 AAA
90	`#beeeed` Copy	`oklch(0.92 0.050 195)` Copy	1.26:1 fail	16.7:1 AAA
80	`#92d5d4` Copy	`oklch(0.83 0.068 195)` Copy	1.65:1 fail	12.7:1 AAA
70	`#69bcbb` Copy	`oklch(0.74 0.081 195)` Copy	2.21:1 fail	9.5:1 AAA
60	`#41a3a3` Copy	`oklch(0.66 0.090 195)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#148383` Copy	`oklch(0.55 0.090 195)` Copy	4.59:1 AA	4.58:1 AA
40	`#006464` Copy	`oklch(0.46 0.078 195)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e4e` Copy	`oklch(0.38 0.066 195)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003939` Copy	`oklch(0.31 0.054 195)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002222` Copy	`oklch(0.23 0.040 195)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001616` Copy	`oklch(0.18 0.031 195)` Copy	18.7:1 AAA	1.12:1 fail

AccentCamel

#c48f60 oklch(0.69 0.090 62)

Step	Hex	OKLCH	vs White	vs Black
Base	`#c48f60` Copy	`oklch(0.69 0.090 62)` Copy	2.82:1 fail	7.45:1 AAA
95	`#ffefe2` Copy	`oklch(0.96 0.025 62)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffe0c5` Copy	`oklch(0.92 0.049 62)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ebc19e` Copy	`oklch(0.84 0.068 62)` Copy	1.65:1 fail	12.7:1 AAA
70	`#d6a57a` Copy	`oklch(0.76 0.081 62)` Copy	2.21:1 fail	9.5:1 AAA
60	`#bf8a5b` Copy	`oklch(0.68 0.090 62)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#9d6a3c` Copy	`oklch(0.57 0.090 62)` Copy	4.59:1 AA	4.58:1 AA
40	`#7e4e1e` Copy	`oklch(0.47 0.090 62)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#663c10` Copy	`oklch(0.40 0.081 62)` Copy	9.5:1 AAA	2.21:1 fail
20	`#4c2b08` Copy	`oklch(0.32 0.068 62)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2f1903` Copy	`oklch(0.24 0.050 62)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1e0f02` Copy	`oklch(0.19 0.036 62)` Copy	18.7:1 AAA	1.12:1 fail

NeutralParchment `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

#f0eeeb oklch(0.95 0.005 78)

Step	Hex	OKLCH	vs White	vs Black
Base	`#f0eeeb` Copy	`oklch(0.95 0.005 78)` Copy	1.16:1 fail	18.13:1 AAA
95	`#f2f2f0` Copy	`oklch(0.96 0.002 78)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e6e5e3` Copy	`oklch(0.92 0.002 78)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cac9c7` Copy	`oklch(0.84 0.003 78)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b0aeac` Copy	`oklch(0.75 0.004 78)` Copy	2.21:1 fail	9.5:1 AAA
60	`#979592` Copy	`oklch(0.67 0.005 78)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#777573` Copy	`oklch(0.56 0.005 78)` Copy	4.59:1 AA	4.58:1 AA
40	`#5b5956` Copy	`oklch(0.46 0.005 78)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#474543` Copy	`oklch(0.39 0.004 78)` Copy	9.5:1 AAA	2.21:1 fail
20	`#343331` Copy	`oklch(0.32 0.003 78)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1f1e1d` Copy	`oklch(0.23 0.002 78)` Copy	16.7:1 AAA	1.26:1 fail
05	`#131211` Copy	`oklch(0.18 0.002 78)` Copy	18.7:1 AAA	1.12:1 fail

SuccessTropical Teal

#57aeb2 oklch(0.70 0.084 199)

Step	Hex	OKLCH	vs White	vs Black
Base	`#57aeb2` Copy	`oklch(0.70 0.084 199)` Copy	2.59:1 fail	8.1:1 AAA
95	`#d8f8f9` Copy	`oklch(0.96 0.034 199)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c1eeef` Copy	`oklch(0.92 0.046 199)` Copy	1.26:1 fail	16.7:1 AAA
80	`#96d4d7` Copy	`oklch(0.83 0.063 199)` Copy	1.65:1 fail	12.7:1 AAA
70	`#6fbbbe` Copy	`oklch(0.74 0.076 199)` Copy	2.21:1 fail	9.5:1 AAA
60	`#4aa2a6` Copy	`oklch(0.66 0.084 199)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#248186` Copy	`oklch(0.55 0.084 199)` Copy	4.59:1 AA	4.58:1 AA
40	`#006367` Copy	`oklch(0.46 0.078 199)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#004e51` Copy	`oklch(0.38 0.066 199)` Copy	9.5:1 AAA	2.21:1 fail
20	`#00393c` Copy	`oklch(0.31 0.054 199)` Copy	12.7:1 AAA	1.65:1 fail
10	`#002224` Copy	`oklch(0.23 0.039 199)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001517` Copy	`oklch(0.18 0.031 199)` Copy	18.7:1 AAA	1.12:1 fail

WarningCopper

#b46834 oklch(0.59 0.118 53)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b46834` Copy	`oklch(0.59 0.118 53)` Copy	4.23:1 AA-lg	4.97:1 AA
95	`#ffefe5` Copy	`oklch(0.96 0.022 53)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfcc` Copy	`oklch(0.93 0.044 53)` Copy	1.26:1 fail	16.7:1 AAA
80	`#fabc96` Copy	`oklch(0.84 0.088 53)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e79e70` Copy	`oklch(0.76 0.106 53)` Copy	2.21:1 fail	9.5:1 AAA
60	`#d0824f` Copy	`oklch(0.68 0.118 53)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#ae622e` Copy	`oklch(0.57 0.118 53)` Copy	4.59:1 AA	4.58:1 AA
40	`#8e4506` Copy	`oklch(0.47 0.118 53)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#713500` Copy	`oklch(0.40 0.102 53)` Copy	9.5:1 AAA	2.21:1 fail
20	`#542600` Copy	`oklch(0.33 0.084 53)` Copy	12.7:1 AAA	1.65:1 fail
10	`#351500` Copy	`oklch(0.24 0.062 53)` Copy	16.7:1 AAA	1.26:1 fail
05	`#230c00` Copy	`oklch(0.19 0.047 53)` Copy	18.7:1 AAA	1.12:1 fail

DangerBurnt Rose

#8b4545 oklch(0.48 0.095 21)

Step	Hex	OKLCH	vs White	vs Black
Base	`#8b4545` Copy	`oklch(0.48 0.095 21)` Copy	6.92:1 AA	3.03:1 AA-lg
95	`#ffeeed` Copy	`oklch(0.96 0.019 21)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdedc` Copy	`oklch(0.93 0.037 21)` Copy	1.26:1 fail	16.7:1 AAA
80	`#f8bab8` Copy	`oklch(0.84 0.072 21)` Copy	1.65:1 fail	12.7:1 AAA
70	`#e39c9a` Copy	`oklch(0.76 0.086 21)` Copy	2.21:1 fail	9.5:1 AAA
60	`#cd807f` Copy	`oklch(0.68 0.096 21)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#aa6160` Copy	`oklch(0.58 0.096 21)` Copy	4.59:1 AA	4.58:1 AA
40	`#8a4444` Copy	`oklch(0.48 0.096 21)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#703334` Copy	`oklch(0.40 0.086 21)` Copy	9.5:1 AAA	2.21:1 fail
20	`#542424` Copy	`oklch(0.33 0.072 21)` Copy	12.7:1 AAA	1.65:1 fail
10	`#341414` Copy	`oklch(0.24 0.052 21)` Copy	16.7:1 AAA	1.26:1 fail
05	`#220c0c` Copy	`oklch(0.19 0.038 21)` Copy	18.7:1 AAA	1.12:1 fail

Stormy Teal

#0d5d57 oklch(0.43 0.072 187)

Step	Hex	OKLCH	vs White	vs Black
Base	`#0d5d57` Copy	`oklch(0.43 0.072 187)` Copy	7.72:1 AAA	2.72:1 fail
95	`#dcf7f4` Copy	`oklch(0.96 0.029 187)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c7ede8` Copy	`oklch(0.92 0.039 187)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a0d3cd` Copy	`oklch(0.83 0.054 187)` Copy	1.65:1 fail	12.7:1 AAA
70	`#7cbab3` Copy	`oklch(0.74 0.064 187)` Copy	2.21:1 fail	9.5:1 AAA
60	`#5ba19a` Copy	`oklch(0.66 0.072 187)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#3a817a` Copy	`oklch(0.56 0.072 187)` Copy	4.59:1 AA	4.58:1 AA
40	`#18635d` Copy	`oklch(0.46 0.072 187)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#074f49` Copy	`oklch(0.38 0.064 187)` Copy	9.5:1 AAA	2.21:1 fail
20	`#023a36` Copy	`oklch(0.31 0.054 187)` Copy	12.7:1 AAA	1.65:1 fail
10	`#012320` Copy	`oklch(0.23 0.039 187)` Copy	16.7:1 AAA	1.26:1 fail
05	`#021614` Copy	`oklch(0.18 0.029 187)` Copy	18.7:1 AAA	1.12:1 fail

Charcoal Blue

#254a5d oklch(0.39 0.053 233)

Step	Hex	OKLCH	vs White	vs Black
Base	`#254a5d` Copy	`oklch(0.39 0.053 233)` Copy	9.48:1 AAA	2.22:1 fail
95	`#e4f4fe` Copy	`oklch(0.96 0.021 233)` Copy	1.12:1 fail	18.7:1 AAA
90	`#d2e9f5` Copy	`oklch(0.92 0.029 233)` Copy	1.26:1 fail	16.7:1 AAA
80	`#b0cedf` Copy	`oklch(0.83 0.040 233)` Copy	1.65:1 fail	12.7:1 AAA
70	`#90b3c7` Copy	`oklch(0.75 0.048 233)` Copy	2.21:1 fail	9.5:1 AAA
60	`#739ab0` Copy	`oklch(0.67 0.053 233)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#547a8f` Copy	`oklch(0.56 0.053 233)` Copy	4.59:1 AA	4.58:1 AA
40	`#385e71` Copy	`oklch(0.46 0.053 233)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#294a5b` Copy	`oklch(0.39 0.048 233)` Copy	9.5:1 AAA	2.21:1 fail
20	`#1c3643` Copy	`oklch(0.32 0.040 233)` Copy	12.7:1 AAA	1.65:1 fail
10	`#0e2029` Copy	`oklch(0.23 0.029 233)` Copy	16.7:1 AAA	1.26:1 fail
05	`#08141a` Copy	`oklch(0.18 0.021 233)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Teal

Camel

Parchment

Tropical Teal

Copper

Burnt Rose

Stormy Teal

Charcoal Blue

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Teal

Camel

Parchment

Tropical Teal

Copper

Burnt Rose

Stormy Teal

Charcoal Blue

Progress & Controls

Notifications

← Key

Key →

BrandTeal

Brand

AccentCamel

Accent

NeutralParchment `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

Neutral

SuccessTropical Teal

Success

WarningCopper

Warning

DangerBurnt Rose

Danger

Stormy Teal

Unassigned

Charcoal Blue

Unassigned

Brand · Teal

Brand

Accent · Camel

Accent

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

Neutral

Success · Tropical Teal

Success

Warning · Copper

Warning

Danger · Burnt Rose

Danger

Stormy Teal

Unassigned

Charcoal Blue

Unassigned

BrandTeal

AccentCamel

NeutralParchment `0.02` Caps OKLCH Chroma (Saturation). Lower = Grayer.

SuccessTropical Teal

WarningCopper

DangerBurnt Rose