Colors
teal
main (≈480)
#007688hover (≈510)
#006c7cactive (≈545)
#006271active.hover (≈575)
#00586620
#f6f9fa50
#e8f0f2100
#d1e2e5150
#bad3d9200
#a3c5cc300
#75a8b4400
#438c9b500
#007283600
#005e6c700
#004b56800
#00303agray
main (≈130)
#d3d4d3hover (≈180)
#c3c4c3active (≈230)
#b3b4b3active.hover (≈280)
#a3a4a320
#f8f8f850
#eeeeee100
#dddedd150
#cdcecd200
#bdbebd300
#9e9f9e400
#7f807f500
#626362600
#474847700
#2d2e2d800
#151615yellow
main (≈175)
#e8c222hover (≈225)
#d8b200active (≈275)
#c7a200active.hover (≈325)
#b7920020
#fcf9eb50
#f8efcd100
#f2de97150
#eccc59200
#e0bb0e300
#c09b00400
#a17c00500
#825e00600
#654100700
#492500800
#2e0900white
main (≈0)
#ffffffhover (≈50)
#eeeeeeactive (≈100)
#dededeactive.hover (≈150)
#cecece20
#f8f8f850
#eeeeee100
#dedede150
#cecece200
#bebebe300
#9e9e9e400
#808080500
#636363600
#484848700
#2e2e2e800
#161616black
main (≈820)
#121212hover (≈865)
#080808active (≈915)
#020202active.hover (≈1000)
#00000020
#f8f8f850
#eeeeee100
#dedede150
#cecece200
#bebebe300
#9e9e9e400
#808080500
#636363600
#484848700
#2e2e2e800
#161616lavender
main (≈490)
#78509chover (≈540)
#6a428cactive (≈595)
#5b337dactive.hover (≈640)
#4e256e20
#f9f8fb50
#f1ecf5100
#e2daeb150
#d4c8e2200
#c6b6d8300
#ab93c3400
#9070af500
#764e99600
#59317a700
#3e145d800
#250040violet
main (≈520)
#4c54a0hover (≈570)
#3f4690active (≈625)
#333780active.hover (≈675)
#27297120
#f7f8fc50
#eceef6100
#d9ddee150
#c7cce5200
#b5bcdc300
#929bca400
#717bb7500
#525ba4600
#383e87700
#212169800
#0f014bblue
main (≈435)
#007cc2hover (≈480)
#006db2active (≈525)
#005ea1active.hover (≈575)
#004f9220
#f5f9fd50
#e6f0f9100
#cde1f2150
#b4d2ec200
#9bc3e5300
#68a5d7400
#2b86c7500
#0068ac600
#004a8c700
#002d6d800
#000e4fturquoise
main (≈365)
#009bb0hover (≈410)
#008ca0active (≈460)
#007c91active.hover (≈505)
#006d8220
#f4fafb50
#e4f1f4100
#c8e4e9150
#add6df200
#90c9d4300
#52adbe400
#0091a6500
#007287600
#005569700
#00394d800
#001f32aquamarine
main (≈325)
#00af9bhover (≈370)
#009f8cactive (≈415)
#00907dactive.hover (≈465)
#00806e20
#f3faf950
#e2f3ef100
#c4e7df150
#a6dad0200
#86cec0300
#34b5a2400
#009784500
#007967600
#005b4b700
#003f31800
#002419red
main (≈355)
#f14a4ahover (≈405)
#df373bactive (≈455)
#cd212cactive.hover (≈500)
#bb001c20
#fff6f450
#ffe8e5100
#ffd0cb150
#ffb8b1200
#ffa098300
#f76b66400
#e0383c500
#bc001d600
#980000700
#750000800
#520000error
main (≈355)
#f14a4ahover (≈405)
#df373bactive (≈455)
#cd212cactive.hover (≈500)
#bb001c20
#fff6f450
#ffe8e5100
#ffd0cb150
#ffb8b1200
#ffa098300
#f76b66400
#e0383c500
#bc001d600
#980000700
#750000800
#520000info
main (≈435)
#007cc2hover (≈480)
#006db2active (≈525)
#005ea1active.hover (≈575)
#004f9220
#f5f9fd50
#e6f0f9100
#cde1f2150
#b4d2ec200
#9bc3e5300
#68a5d7400
#2b86c7500
#0068ac600
#004a8c700
#002d6d800
#000e4fsuccess
main (≈435)
#007cc2hover (≈480)
#006db2active (≈525)
#005ea1active.hover (≈575)
#004f9220
#f5f9fd50
#e6f0f9100
#cde1f2150
#b4d2ec200
#9bc3e5300
#68a5d7400
#2b86c7500
#0068ac600
#004a8c700
#002d6d800
#000e4fprimary
main (≈480)
#007688hover (≈510)
#006c7cactive (≈545)
#006271active.hover (≈575)
#00586620
#f6f9fa50
#e8f0f2100
#d1e2e5150
#bad3d9200
#a3c5cc300
#75a8b4400
#438c9b500
#007283600
#005e6c700
#004b56800
#00303aborder
main (≈130)
#d3d4d3hover (≈250)
#adaeadactive (≈300)
#9e9f9eactive.hover (≈350)
#8e8f8e20
#f8f8f850
#eeeeee100
#dddedd150
#cdcecd200
#bdbebd300
#9e9f9e400
#7f807f500
#626362600
#474847700
#2d2e2d800
#151615Contrasts
teal
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1:1 | Fail | Fail |
gray | 3,58:1 | Fail | Pass |
yellow | 3,08:1 | Fail | Pass |
white | 5,32:1 | Pass | Pass |
black | 3,52:1 | Fail | Pass |
lavender | 1,15:1 | Fail | Fail |
violet | 1,28:1 | Fail | Fail |
blue | 1,18:1 | Fail | Fail |
turquoise | 1,6:1 | Fail | Fail |
aquamarine | 1,93:1 | Fail | Fail |
red | 1,47:1 | Fail | Fail |
error | 1,47:1 | Fail | Fail |
info | 1,18:1 | Fail | Fail |
success | 1,18:1 | Fail | Fail |
primary | 1:1 | Fail | Fail |
border | 2,85:1 | Fail | Fail |
gray
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 3,58:1 | Fail | Pass |
gray | 1:1 | Fail | Fail |
yellow | 1,16:1 | Fail | Fail |
white | 1,49:1 | Fail | Fail |
black | 12,6:1 | Pass | Pass |
lavender | 4,12:1 | Fail | Pass |
violet | 4,58:1 | Pass | Pass |
blue | 3,03:1 | Fail | Pass |
turquoise | 2,24:1 | Fail | Fail |
aquamarine | 1,86:1 | Fail | Fail |
red | 2,43:1 | Fail | Fail |
error | 2,43:1 | Fail | Fail |
info | 3,03:1 | Fail | Pass |
success | 3,03:1 | Fail | Pass |
primary | 3,58:1 | Fail | Pass |
border | 1,25:1 | Fail | Fail |
yellow
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 3,08:1 | Fail | Pass |
gray | 1,16:1 | Fail | Fail |
yellow | 1:1 | Fail | Fail |
white | 1,73:1 | Fail | Fail |
black | 10,86:1 | Pass | Pass |
lavender | 3,55:1 | Fail | Pass |
violet | 3,95:1 | Fail | Pass |
blue | 2,61:1 | Fail | Fail |
turquoise | 1,93:1 | Fail | Fail |
aquamarine | 1,6:1 | Fail | Fail |
red | 2,09:1 | Fail | Fail |
error | 2,09:1 | Fail | Fail |
info | 2,61:1 | Fail | Fail |
success | 2,61:1 | Fail | Fail |
primary | 3,08:1 | Fail | Pass |
border | 1,08:1 | Fail | Fail |
white
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 5,32:1 | Pass | Pass |
gray | 1,49:1 | Fail | Fail |
yellow | 1,73:1 | Fail | Fail |
white | 1:1 | Fail | Fail |
black | 18,73:1 | Pass | Pass |
lavender | 6,13:1 | Pass | Pass |
violet | 6,81:1 | Pass | Pass |
blue | 4,5:1 | Pass | Pass |
turquoise | 3,33:1 | Fail | Pass |
aquamarine | 2,76:1 | Fail | Fail |
red | 3,61:1 | Fail | Pass |
error | 3,61:1 | Fail | Pass |
info | 4,5:1 | Pass | Pass |
success | 4,5:1 | Pass | Pass |
primary | 5,32:1 | Pass | Pass |
border | 1,86:1 | Fail | Fail |
black
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 3,52:1 | Fail | Pass |
gray | 12,6:1 | Pass | Pass |
yellow | 10,86:1 | Pass | Pass |
white | 18,73:1 | Pass | Pass |
black | 1:1 | Fail | Fail |
lavender | 3,06:1 | Fail | Pass |
violet | 2,75:1 | Fail | Fail |
blue | 4,16:1 | Fail | Pass |
turquoise | 5,63:1 | Pass | Pass |
aquamarine | 6,78:1 | Pass | Pass |
red | 5,19:1 | Pass | Pass |
error | 5,19:1 | Pass | Pass |
info | 4,16:1 | Fail | Pass |
success | 4,16:1 | Fail | Pass |
primary | 3,52:1 | Fail | Pass |
border | 10,05:1 | Pass | Pass |
lavender
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,15:1 | Fail | Fail |
gray | 4,12:1 | Fail | Pass |
yellow | 3,55:1 | Fail | Pass |
white | 6,13:1 | Pass | Pass |
black | 3,06:1 | Fail | Pass |
lavender | 1:1 | Fail | Fail |
violet | 1,11:1 | Fail | Fail |
blue | 1,36:1 | Fail | Fail |
turquoise | 1,84:1 | Fail | Fail |
aquamarine | 2,22:1 | Fail | Fail |
red | 1,7:1 | Fail | Fail |
error | 1,7:1 | Fail | Fail |
info | 1,36:1 | Fail | Fail |
success | 1,36:1 | Fail | Fail |
primary | 1,15:1 | Fail | Fail |
border | 3,29:1 | Fail | Pass |
violet
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,28:1 | Fail | Fail |
gray | 4,58:1 | Pass | Pass |
yellow | 3,95:1 | Fail | Pass |
white | 6,81:1 | Pass | Pass |
black | 2,75:1 | Fail | Fail |
lavender | 1,11:1 | Fail | Fail |
violet | 1:1 | Fail | Fail |
blue | 1,51:1 | Fail | Fail |
turquoise | 2,05:1 | Fail | Fail |
aquamarine | 2,47:1 | Fail | Fail |
red | 1,89:1 | Fail | Fail |
error | 1,89:1 | Fail | Fail |
info | 1,51:1 | Fail | Fail |
success | 1,51:1 | Fail | Fail |
primary | 1,28:1 | Fail | Fail |
border | 3,65:1 | Fail | Pass |
blue
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,18:1 | Fail | Fail |
gray | 3,03:1 | Fail | Pass |
yellow | 2,61:1 | Fail | Fail |
white | 4,5:1 | Pass | Pass |
black | 4,16:1 | Fail | Pass |
lavender | 1,36:1 | Fail | Fail |
violet | 1,51:1 | Fail | Fail |
blue | 1:1 | Fail | Fail |
turquoise | 1,35:1 | Fail | Fail |
aquamarine | 1,63:1 | Fail | Fail |
red | 1,25:1 | Fail | Fail |
error | 1,25:1 | Fail | Fail |
info | 1:1 | Fail | Fail |
success | 1:1 | Fail | Fail |
primary | 1,18:1 | Fail | Fail |
border | 2,42:1 | Fail | Fail |
turquoise
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,6:1 | Fail | Fail |
gray | 2,24:1 | Fail | Fail |
yellow | 1,93:1 | Fail | Fail |
white | 3,33:1 | Fail | Pass |
black | 5,63:1 | Pass | Pass |
lavender | 1,84:1 | Fail | Fail |
violet | 2,05:1 | Fail | Fail |
blue | 1,35:1 | Fail | Fail |
turquoise | 1:1 | Fail | Fail |
aquamarine | 1,2:1 | Fail | Fail |
red | 1,09:1 | Fail | Fail |
error | 1,09:1 | Fail | Fail |
info | 1,35:1 | Fail | Fail |
success | 1,35:1 | Fail | Fail |
primary | 1,6:1 | Fail | Fail |
border | 1,78:1 | Fail | Fail |
aquamarine
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,93:1 | Fail | Fail |
gray | 1,86:1 | Fail | Fail |
yellow | 1,6:1 | Fail | Fail |
white | 2,76:1 | Fail | Fail |
black | 6,78:1 | Pass | Pass |
lavender | 2,22:1 | Fail | Fail |
violet | 2,47:1 | Fail | Fail |
blue | 1,63:1 | Fail | Fail |
turquoise | 1,2:1 | Fail | Fail |
aquamarine | 1:1 | Fail | Fail |
red | 1,31:1 | Fail | Fail |
error | 1,31:1 | Fail | Fail |
info | 1,63:1 | Fail | Fail |
success | 1,63:1 | Fail | Fail |
primary | 1,93:1 | Fail | Fail |
border | 1,48:1 | Fail | Fail |
red
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,47:1 | Fail | Fail |
gray | 2,43:1 | Fail | Fail |
yellow | 2,09:1 | Fail | Fail |
white | 3,61:1 | Fail | Pass |
black | 5,19:1 | Pass | Pass |
lavender | 1,7:1 | Fail | Fail |
violet | 1,89:1 | Fail | Fail |
blue | 1,25:1 | Fail | Fail |
turquoise | 1,09:1 | Fail | Fail |
aquamarine | 1,31:1 | Fail | Fail |
red | 1:1 | Fail | Fail |
error | 1:1 | Fail | Fail |
info | 1,25:1 | Fail | Fail |
success | 1,25:1 | Fail | Fail |
primary | 1,47:1 | Fail | Fail |
border | 1,94:1 | Fail | Fail |
error
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,47:1 | Fail | Fail |
gray | 2,43:1 | Fail | Fail |
yellow | 2,09:1 | Fail | Fail |
white | 3,61:1 | Fail | Pass |
black | 5,19:1 | Pass | Pass |
lavender | 1,7:1 | Fail | Fail |
violet | 1,89:1 | Fail | Fail |
blue | 1,25:1 | Fail | Fail |
turquoise | 1,09:1 | Fail | Fail |
aquamarine | 1,31:1 | Fail | Fail |
red | 1:1 | Fail | Fail |
error | 1:1 | Fail | Fail |
info | 1,25:1 | Fail | Fail |
success | 1,25:1 | Fail | Fail |
primary | 1,47:1 | Fail | Fail |
border | 1,94:1 | Fail | Fail |
info
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,18:1 | Fail | Fail |
gray | 3,03:1 | Fail | Pass |
yellow | 2,61:1 | Fail | Fail |
white | 4,5:1 | Pass | Pass |
black | 4,16:1 | Fail | Pass |
lavender | 1,36:1 | Fail | Fail |
violet | 1,51:1 | Fail | Fail |
blue | 1:1 | Fail | Fail |
turquoise | 1,35:1 | Fail | Fail |
aquamarine | 1,63:1 | Fail | Fail |
red | 1,25:1 | Fail | Fail |
error | 1,25:1 | Fail | Fail |
info | 1:1 | Fail | Fail |
success | 1:1 | Fail | Fail |
primary | 1,18:1 | Fail | Fail |
border | 2,42:1 | Fail | Fail |
success
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1,18:1 | Fail | Fail |
gray | 3,03:1 | Fail | Pass |
yellow | 2,61:1 | Fail | Fail |
white | 4,5:1 | Pass | Pass |
black | 4,16:1 | Fail | Pass |
lavender | 1,36:1 | Fail | Fail |
violet | 1,51:1 | Fail | Fail |
blue | 1:1 | Fail | Fail |
turquoise | 1,35:1 | Fail | Fail |
aquamarine | 1,63:1 | Fail | Fail |
red | 1,25:1 | Fail | Fail |
error | 1,25:1 | Fail | Fail |
info | 1:1 | Fail | Fail |
success | 1:1 | Fail | Fail |
primary | 1,18:1 | Fail | Fail |
border | 2,42:1 | Fail | Fail |
primary
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 1:1 | Fail | Fail |
gray | 3,58:1 | Fail | Pass |
yellow | 3,08:1 | Fail | Pass |
white | 5,32:1 | Pass | Pass |
black | 3,52:1 | Fail | Pass |
lavender | 1,15:1 | Fail | Fail |
violet | 1,28:1 | Fail | Fail |
blue | 1,18:1 | Fail | Fail |
turquoise | 1,6:1 | Fail | Fail |
aquamarine | 1,93:1 | Fail | Fail |
red | 1,47:1 | Fail | Fail |
error | 1,47:1 | Fail | Fail |
info | 1,18:1 | Fail | Fail |
success | 1,18:1 | Fail | Fail |
primary | 1:1 | Fail | Fail |
border | 2,85:1 | Fail | Fail |
border
| Text color | Contrast | Small text | Large text |
|---|---|---|---|
teal | 2,85:1 | Fail | Fail |
gray | 1,25:1 | Fail | Fail |
yellow | 1,08:1 | Fail | Fail |
white | 1,86:1 | Fail | Fail |
black | 10,05:1 | Pass | Pass |
lavender | 3,29:1 | Fail | Pass |
violet | 3,65:1 | Fail | Pass |
blue | 2,42:1 | Fail | Fail |
turquoise | 1,78:1 | Fail | Fail |
aquamarine | 1,48:1 | Fail | Fail |
red | 1,94:1 | Fail | Fail |
error | 1,94:1 | Fail | Fail |
info | 2,42:1 | Fail | Fail |
success | 2,42:1 | Fail | Fail |
primary | 2,85:1 | Fail | Fail |
border | 1:1 | Fail | Fail |