Look Awesome

Brand

#00483e oklch(0.36 0.065 180)

Step	Hex	OKLCH	vs White	vs Black
Base	`#00483e` Copy	`oklch(0.36 0.065 180)` Copy	10.52:1 AAA	2.0:1 fail
95	`#dff7f1` Copy	`oklch(0.96 0.026 180)` Copy	1.12:1 fail	18.7:1 AAA
90	`#cbece4` Copy	`oklch(0.92 0.036 180)` Copy	1.26:1 fail	16.7:1 AAA
80	`#a6d2c8` Copy	`oklch(0.83 0.049 180)` Copy	1.65:1 fail	12.7:1 AAA
70	`#83b9ad` Copy	`oklch(0.74 0.059 180)` Copy	2.21:1 fail	9.5:1 AAA
60	`#64a094` Copy	`oklch(0.66 0.066 180)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#448074` Copy	`oklch(0.56 0.066 180)` Copy	4.59:1 AA	4.58:1 AA
40	`#266358` Copy	`oklch(0.46 0.066 180)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#174e45` Copy	`oklch(0.38 0.059 180)` Copy	9.5:1 AAA	2.21:1 fail
20	`#0d3932` Copy	`oklch(0.31 0.049 180)` Copy	12.7:1 AAA	1.65:1 fail
10	`#05221d` Copy	`oklch(0.23 0.036 180)` Copy	16.7:1 AAA	1.26:1 fail
05	`#041512` Copy	`oklch(0.18 0.026 180)` Copy	18.7:1 AAA	1.12:1 fail

Accent

#ea7246 oklch(0.69 0.160 40)

Step	Hex	OKLCH	vs White	vs Black
Base	`#ea7246` Copy	`oklch(0.69 0.160 40)` Copy	3.0:1 AA-lg	6.99:1 AA
95	`#ffeee9` Copy	`oklch(0.96 0.020 40)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffdfd3` Copy	`oklch(0.93 0.040 40)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb9a0` Copy	`oklch(0.84 0.089 40)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff916a` Copy	`oklch(0.77 0.144 40)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ea7246` Copy	`oklch(0.69 0.160 40)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#c55123` Copy	`oklch(0.58 0.160 40)` Copy	4.59:1 AA	4.58:1 AA
40	`#a03500` Copy	`oklch(0.48 0.150 40)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#7f2900` Copy	`oklch(0.41 0.127 40)` Copy	9.5:1 AAA	2.21:1 fail
20	`#5f1c00` Copy	`oklch(0.33 0.104 40)` Copy	12.7:1 AAA	1.65:1 fail
10	`#3c0e00` Copy	`oklch(0.24 0.076 40)` Copy	16.7:1 AAA	1.26:1 fail
05	`#290700` Copy	`oklch(0.19 0.060 40)` Copy	18.7:1 AAA	1.12:1 fail

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

#787573 oklch(0.56 0.005 56)

Step	Hex	OKLCH	vs White	vs Black
Base	`#787573` Copy	`oklch(0.56 0.005 56)` Copy	4.57:1 AA	4.59:1 AA
95	`#f3f1f1` Copy	`oklch(0.96 0.002 56)` Copy	1.12:1 fail	18.7:1 AAA
90	`#e7e5e4` Copy	`oklch(0.92 0.003 56)` Copy	1.26:1 fail	16.7:1 AAA
80	`#cbc9c7` Copy	`oklch(0.84 0.004 56)` Copy	1.65:1 fail	12.7:1 AAA
70	`#b1aeac` Copy	`oklch(0.75 0.004 56)` Copy	2.21:1 fail	9.5:1 AAA
60	`#979492` Copy	`oklch(0.67 0.005 56)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#787573` Copy	`oklch(0.56 0.005 56)` Copy	4.59:1 AA	4.58:1 AA
40	`#5b5957` Copy	`oklch(0.46 0.005 56)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#484544` Copy	`oklch(0.39 0.004 56)` Copy	9.5:1 AAA	2.21:1 fail
20	`#343231` Copy	`oklch(0.32 0.004 56)` Copy	12.7:1 AAA	1.65:1 fail
10	`#1f1e1d` Copy	`oklch(0.24 0.003 56)` Copy	16.7:1 AAA	1.26:1 fail
05	`#131211` Copy	`oklch(0.18 0.002 56)` Copy	18.7:1 AAA	1.12:1 fail

SuccessLys grøn

#63b375 oklch(0.70 0.120 150)

Step	Hex	OKLCH	vs White	vs Black
Base	`#63b375` Copy	`oklch(0.70 0.120 150)` Copy	2.55:1 fail	8.24:1 AAA
95	`#dafadf` Copy	`oklch(0.96 0.048 150)` Copy	1.12:1 fail	18.7:1 AAA
90	`#c5f0cc` Copy	`oklch(0.92 0.066 150)` Copy	1.26:1 fail	16.7:1 AAA
80	`#9cd7a7` Copy	`oklch(0.83 0.090 150)` Copy	1.65:1 fail	12.7:1 AAA
70	`#77be86` Copy	`oklch(0.74 0.108 150)` Copy	2.21:1 fail	9.5:1 AAA
60	`#55a568` Copy	`oklch(0.66 0.120 150)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#33854a` Copy	`oklch(0.55 0.120 150)` Copy	4.59:1 AA	4.58:1 AA
40	`#0b672e` Copy	`oklch(0.45 0.120 150)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#005121` Copy	`oklch(0.38 0.106 150)` Copy	9.5:1 AAA	2.21:1 fail
20	`#003c16` Copy	`oklch(0.31 0.086 150)` Copy	12.7:1 AAA	1.65:1 fail
10	`#00240a` Copy	`oklch(0.23 0.064 150)` Copy	16.7:1 AAA	1.26:1 fail
05	`#001705` Copy	`oklch(0.18 0.048 150)` Copy	18.7:1 AAA	1.12:1 fail

Warning

#fff075 oklch(0.94 0.144 102)

Step	Hex	OKLCH	vs White	vs Black
Base	`#fff075` Copy	`oklch(0.94 0.144 102)` Copy	1.17:1 fail	17.97:1 AAA
95	`#f8f3c7` Copy	`oklch(0.96 0.058 102)` Copy	1.12:1 fail	18.7:1 AAA
90	`#eee7aa` Copy	`oklch(0.92 0.079 102)` Copy	1.26:1 fail	16.7:1 AAA
80	`#d6cb76` Copy	`oklch(0.83 0.108 102)` Copy	1.65:1 fail	12.7:1 AAA
70	`#beb042` Copy	`oklch(0.75 0.130 102)` Copy	2.21:1 fail	9.5:1 AAA
60	`#a59600` Copy	`oklch(0.67 0.140 102)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#837700` Copy	`oklch(0.56 0.118 102)` Copy	4.59:1 AA	4.58:1 AA
40	`#635a00` Copy	`oklch(0.46 0.097 102)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#4e4600` Copy	`oklch(0.39 0.082 102)` Copy	9.5:1 AAA	2.21:1 fail
20	`#393300` Copy	`oklch(0.32 0.067 102)` Copy	12.7:1 AAA	1.65:1 fail
10	`#221e00` Copy	`oklch(0.23 0.049 102)` Copy	16.7:1 AAA	1.26:1 fail
05	`#161300` Copy	`oklch(0.18 0.039 102)` Copy	18.7:1 AAA	1.12:1 fail

Danger

#b6000e oklch(0.49 0.199 28)

Step	Hex	OKLCH	vs White	vs Black
Base	`#b6000e` Copy	`oklch(0.49 0.199 28)` Copy	7.01:1 AAA	3.0:1 AA-lg
95	`#ffeeec` Copy	`oklch(0.96 0.019 28)` Copy	1.12:1 fail	18.7:1 AAA
90	`#ffded9` Copy	`oklch(0.93 0.038 28)` Copy	1.26:1 fail	16.7:1 AAA
80	`#ffb8ae` Copy	`oklch(0.85 0.085 28)` Copy	1.65:1 fail	12.7:1 AAA
70	`#ff8f82` Copy	`oklch(0.77 0.138 28)` Copy	2.21:1 fail	9.5:1 AAA
60	`#ff5f53` Copy	`oklch(0.69 0.198 28)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#da3832` Copy	`oklch(0.59 0.199 28)` Copy	4.59:1 AA	4.58:1 AA
40	`#b6000e` Copy	`oklch(0.49 0.199 28)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#910009` Copy	`oklch(0.41 0.169 28)` Copy	9.5:1 AAA	2.21:1 fail
20	`#6d0005` Copy	`oklch(0.34 0.138 28)` Copy	12.7:1 AAA	1.65:1 fail
10	`#460002` Copy	`oklch(0.25 0.101 28)` Copy	16.7:1 AAA	1.26:1 fail
05	`#2f0001` Copy	`oklch(0.19 0.079 28)` Copy	18.7:1 AAA	1.12:1 fail

Lys accent

#946c5c oklch(0.57 0.057 43)

Step	Hex	OKLCH	vs White	vs Black
Base	`#946c5c` Copy	`oklch(0.57 0.057 43)` Copy	4.61:1 AA	4.56:1 AA
95	`#ffeee8` Copy	`oklch(0.96 0.020 43)` Copy	1.12:1 fail	18.7:1 AAA
90	`#fae0d6` Copy	`oklch(0.92 0.031 43)` Copy	1.26:1 fail	16.7:1 AAA
80	`#e4c2b5` Copy	`oklch(0.84 0.043 43)` Copy	1.65:1 fail	12.7:1 AAA
70	`#cda697` Copy	`oklch(0.76 0.051 43)` Copy	2.21:1 fail	9.5:1 AAA
60	`#b68c7b` Copy	`oklch(0.68 0.057 43)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#946c5c` Copy	`oklch(0.57 0.057 43)` Copy	4.59:1 AA	4.58:1 AA
40	`#765041` Copy	`oklch(0.47 0.057 43)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#5f3e31` Copy	`oklch(0.40 0.051 43)` Copy	9.5:1 AAA	2.21:1 fail
20	`#462c22` Copy	`oklch(0.32 0.043 43)` Copy	12.7:1 AAA	1.65:1 fail
10	`#2b1a13` Copy	`oklch(0.24 0.031 43)` Copy	16.7:1 AAA	1.26:1 fail
05	`#1b0f0b` Copy	`oklch(0.18 0.023 43)` Copy	18.7:1 AAA	1.12:1 fail

Lys brand

#66797f oklch(0.56 0.024 219)

Step	Hex	OKLCH	vs White	vs Black
Base	`#66797f` Copy	`oklch(0.56 0.024 219)` Copy	4.56:1 AA	4.61:1 AA
95	`#ebf3f6` Copy	`oklch(0.96 0.010 219)` Copy	1.12:1 fail	18.7:1 AAA
90	`#dce7eb` Copy	`oklch(0.92 0.013 219)` Copy	1.26:1 fail	16.7:1 AAA
80	`#bdccd1` Copy	`oklch(0.84 0.018 219)` Copy	1.65:1 fail	12.7:1 AAA
70	`#9fb2b7` Copy	`oklch(0.75 0.022 219)` Copy	2.21:1 fail	9.5:1 AAA
60	`#85989f` Copy	`oklch(0.67 0.024 219)` Copy	3.0:1 AA-lg	7.0:1 AAA
50	`#66797f` Copy	`oklch(0.56 0.024 219)` Copy	4.59:1 AA	4.58:1 AA
40	`#4a5c62` Copy	`oklch(0.46 0.024 219)` Copy	7.0:1 AAA	3.0:1 AA-lg
30	`#38484d` Copy	`oklch(0.39 0.022 219)` Copy	9.5:1 AAA	2.21:1 fail
20	`#283539` Copy	`oklch(0.32 0.018 219)` Copy	12.7:1 AAA	1.65:1 fail
10	`#171f22` Copy	`oklch(0.23 0.013 219)` Copy	16.7:1 AAA	1.26:1 fail
05	`#0d1315` Copy	`oklch(0.18 0.010 219)` Copy	18.7:1 AAA	1.12:1 fail

Component Preview

Buttons

Brand

Accent

Neutral

Success

Warning

Danger

Named Buttons

Lys grøn

Lys accent

Lys brand

Callouts

Saved successfully

Unsaved changes

Cannot delete brand

Badges

Brand

Accent

Neutral

Success

Warning

Danger

Named Badges

Lys grøn

Lys accent

Lys brand

Progress & Controls

Notifications

← Key

Key →

Brand

Brand

Accent

Accent

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

Neutral

SuccessLys grøn

Success

Warning

Warning

Danger

Danger

Lys accent

Unassigned

Lys brand

Unassigned

Brand

Brand

Accent

Accent

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

Neutral

Success · Lys grøn

Success

Warning

Warning

Danger

Danger

Lys accent

Unassigned

Lys brand

Unassigned

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

SuccessLys grøn