Gonk Design: Pattern Library
Colors
You can either use colors directly, using a CSS Custom Property, or with generated CSS utility classes.| Name | Color code | Custom Property | Color Utility Class | BG Utility Class |
|---|---|---|---|---|
|
Dark
|
oklch(0.15 0 49.25)
|
var(--color-dark)
|
.text-dark
|
.bg-dark
|
|
Dark Glare
|
oklch(0.22 0.01 56.04)
|
var(--color-dark-glare)
|
.text-dark-glare
|
.bg-dark-glare
|
|
Mid
|
oklch(0.9 0.07 70.7)
|
var(--color-mid)
|
.text-mid
|
.bg-mid
|
|
Light
|
oklch(0.98 0.02 73.68)
|
var(--color-light)
|
.text-light
|
.bg-light
|
|
Primary
|
oklch(0.67 0.16 58.32)
|
var(--color-primary)
|
.text-primary
|
.bg-primary
|
|
white
|
oklch(100% 0 0)
|
var(--color-white)
|
.text-white
|
.bg-white
|
|
black
|
oklch(0% 0 0)
|
var(--color-black)
|
.text-black
|
.bg-black
|
|
slate-50
|
oklch(98.42% 0.0034 247.86)
|
var(--color-slate-50)
|
.text-slate-50
|
.bg-slate-50
|
|
slate-100
|
oklch(96.83% 0.0069 247.9)
|
var(--color-slate-100)
|
.text-slate-100
|
.bg-slate-100
|
|
slate-200
|
oklch(92.88% 0.0126 255.51)
|
var(--color-slate-200)
|
.text-slate-200
|
.bg-slate-200
|
|
slate-300
|
oklch(86.9% 0.0198 252.89)
|
var(--color-slate-300)
|
.text-slate-300
|
.bg-slate-300
|
|
slate-400
|
oklch(71.07% 0.0351 256.79)
|
var(--color-slate-400)
|
.text-slate-400
|
.bg-slate-400
|
|
slate-500
|
oklch(55.44% 0.0407 257.42)
|
var(--color-slate-500)
|
.text-slate-500
|
.bg-slate-500
|
|
slate-600
|
oklch(44.55% 0.0374 257.28)
|
var(--color-slate-600)
|
.text-slate-600
|
.bg-slate-600
|
|
slate-700
|
oklch(37.17% 0.0392 257.29)
|
var(--color-slate-700)
|
.text-slate-700
|
.bg-slate-700
|
|
slate-800
|
oklch(27.95% 0.0368 260.03)
|
var(--color-slate-800)
|
.text-slate-800
|
.bg-slate-800
|
|
slate-900
|
oklch(20.77% 0.0398 265.75)
|
var(--color-slate-900)
|
.text-slate-900
|
.bg-slate-900
|
|
slate-950
|
oklch(12.88% 0.0406 264.7)
|
var(--color-slate-950)
|
.text-slate-950
|
.bg-slate-950
|
|
gray-50
|
oklch(98.46% 0.0017 247.84)
|
var(--color-gray-50)
|
.text-gray-50
|
.bg-gray-50
|
|
gray-100
|
oklch(96.7% 0.0029 264.54)
|
var(--color-gray-100)
|
.text-gray-100
|
.bg-gray-100
|
|
gray-200
|
oklch(92.76% 0.0058 264.53)
|
var(--color-gray-200)
|
.text-gray-200
|
.bg-gray-200
|
|
gray-300
|
oklch(87.17% 0.0093 258.34)
|
var(--color-gray-300)
|
.text-gray-300
|
.bg-gray-300
|
|
gray-400
|
oklch(71.37% 0.0192 261.32)
|
var(--color-gray-400)
|
.text-gray-400
|
.bg-gray-400
|
|
gray-500
|
oklch(55.1% 0.0234 264.36)
|
var(--color-gray-500)
|
.text-gray-500
|
.bg-gray-500
|
|
gray-600
|
oklch(55.1% 0.0234 264.36)
|
var(--color-gray-600)
|
.text-gray-600
|
.bg-gray-600
|
|
gray-700
|
oklch(37.29% 0.0306 259.73)
|
var(--color-gray-700)
|
.text-gray-700
|
.bg-gray-700
|
|
gray-800
|
oklch(27.81% 0.0296 256.85)
|
var(--color-gray-800)
|
.text-gray-800
|
.bg-gray-800
|
|
gray-900
|
oklch(21.01% 0.0318 264.66)
|
var(--color-gray-900)
|
.text-gray-900
|
.bg-gray-900
|
|
gray-950
|
oklch(12.96% 0.0274 261.69)
|
var(--color-gray-950)
|
.text-gray-950
|
.bg-gray-950
|
|
zinc-50
|
oklch(98.51% 0 0)
|
var(--color-zinc-50)
|
.text-zinc-50
|
.bg-zinc-50
|
|
zinc-100
|
oklch(96.74% 0.0013 286.38)
|
var(--color-zinc-100)
|
.text-zinc-100
|
.bg-zinc-100
|
|
zinc-200
|
oklch(91.97% 0.004 286.32)
|
var(--color-zinc-200)
|
.text-zinc-200
|
.bg-zinc-200
|
|
zinc-300
|
oklch(87.11% 0.0055 286.29)
|
var(--color-zinc-300)
|
.text-zinc-300
|
.bg-zinc-300
|
|
zinc-400
|
oklch(71.18% 0.0129 286.07)
|
var(--color-zinc-400)
|
.text-zinc-400
|
.bg-zinc-400
|
|
zinc-500
|
oklch(55.17% 0.0138 285.94)
|
var(--color-zinc-500)
|
.text-zinc-500
|
.bg-zinc-500
|
|
zinc-600
|
oklch(44.19% 0.0146 285.79)
|
var(--color-zinc-600)
|
.text-zinc-600
|
.bg-zinc-600
|
|
zinc-700
|
oklch(37.03% 0.0119 285.81)
|
var(--color-zinc-700)
|
.text-zinc-700
|
.bg-zinc-700
|
|
zinc-800
|
oklch(27.39% 0.0055 286.03)
|
var(--color-zinc-800)
|
.text-zinc-800
|
.bg-zinc-800
|
|
zinc-900
|
oklch(21.03% 0.0059 285.89)
|
var(--color-zinc-900)
|
.text-zinc-900
|
.bg-zinc-900
|
|
zinc-950
|
oklch(14.08% 0.0044 285.82)
|
var(--color-zinc-950)
|
.text-zinc-950
|
.bg-zinc-950
|
|
neutral-50
|
oklch(98.51% 0 0)
|
var(--color-neutral-50)
|
.text-neutral-50
|
.bg-neutral-50
|
|
neutral-100
|
oklch(97.02% 0 0)
|
var(--color-neutral-100)
|
.text-neutral-100
|
.bg-neutral-100
|
|
neutral-200
|
oklch(92.19% 0 0)
|
var(--color-neutral-200)
|
.text-neutral-200
|
.bg-neutral-200
|
|
neutral-300
|
oklch(86.99% 0 0)
|
var(--color-neutral-300)
|
.text-neutral-300
|
.bg-neutral-300
|
|
neutral-400
|
oklch(71.55% 0 0)
|
var(--color-neutral-400)
|
.text-neutral-400
|
.bg-neutral-400
|
|
neutral-500
|
oklch(55.55% 0 0)
|
var(--color-neutral-500)
|
.text-neutral-500
|
.bg-neutral-500
|
|
neutral-600
|
oklch(43.86% 0 0)
|
var(--color-neutral-600)
|
.text-neutral-600
|
.bg-neutral-600
|
|
neutral-700
|
oklch(37.15% 0 0)
|
var(--color-neutral-700)
|
.text-neutral-700
|
.bg-neutral-700
|
|
neutral-800
|
oklch(26.86% 0 0)
|
var(--color-neutral-800)
|
.text-neutral-800
|
.bg-neutral-800
|
|
neutral-900
|
oklch(20.46% 0 0)
|
var(--color-neutral-900)
|
.text-neutral-900
|
.bg-neutral-900
|
|
neutral-950
|
oklch(14.48% 0 0)
|
var(--color-neutral-950)
|
.text-neutral-950
|
.bg-neutral-950
|
|
slate-950
|
oklch(0.154 0.011 257.417)
|
var(--color-slate-950)
|
.text-slate-950
|
.bg-slate-950
|
|
slate-900
|
oklch(0.234 0.017 257.417)
|
var(--color-slate-900)
|
.text-slate-900
|
.bg-slate-900
|
|
slate-800
|
oklch(0.314 0.023 257.417)
|
var(--color-slate-800)
|
.text-slate-800
|
.bg-slate-800
|
|
slate-700
|
oklch(0.393 0.029 257.417)
|
var(--color-slate-700)
|
.text-slate-700
|
.bg-slate-700
|
|
slate-600
|
oklch(0.473 0.035 257.417)
|
var(--color-slate-600)
|
.text-slate-600
|
.bg-slate-600
|
|
slate-500
|
oklch(0.552 0.041 257.417)
|
var(--color-slate-500)
|
.text-slate-500
|
.bg-slate-500
|
|
slate-400
|
oklch(0.632 0.041 257.417)
|
var(--color-slate-400)
|
.text-slate-400
|
.bg-slate-400
|
|
slate-300
|
oklch(0.711 0.031 257.417)
|
var(--color-slate-300)
|
.text-slate-300
|
.bg-slate-300
|
|
slate-200
|
oklch(0.791 0.022 257.417)
|
var(--color-slate-200)
|
.text-slate-200
|
.bg-slate-200
|
|
slate-100
|
oklch(0.87 0.013 257.417)
|
var(--color-slate-100)
|
.text-slate-100
|
.bg-slate-100
|
|
slate-50
|
oklch(0.95 0.005 257.417)
|
var(--color-slate-50)
|
.text-slate-50
|
.bg-slate-50
|
|
gray-950
|
oklch(0.151 0.01 264.364)
|
var(--color-gray-950)
|
.text-gray-950
|
.bg-gray-950
|
|
gray-900
|
oklch(0.231 0.015 264.364)
|
var(--color-gray-900)
|
.text-gray-900
|
.bg-gray-900
|
|
gray-800
|
oklch(0.311 0.02 264.364)
|
var(--color-gray-800)
|
.text-gray-800
|
.bg-gray-800
|
|
gray-700
|
oklch(0.391 0.025 264.364)
|
var(--color-gray-700)
|
.text-gray-700
|
.bg-gray-700
|
|
gray-600
|
oklch(0.471 0.028 264.364)
|
var(--color-gray-600)
|
.text-gray-600
|
.bg-gray-600
|
|
gray-500
|
oklch(0.551 0.023 264.364)
|
var(--color-gray-500)
|
.text-gray-500
|
.bg-gray-500
|
|
gray-400
|
oklch(0.63 0.019 264.364)
|
var(--color-gray-400)
|
.text-gray-400
|
.bg-gray-400
|
|
gray-300
|
oklch(0.71 0.014 264.364)
|
var(--color-gray-300)
|
.text-gray-300
|
.bg-gray-300
|
|
gray-200
|
oklch(0.79 0.01 264.364)
|
var(--color-gray-200)
|
.text-gray-200
|
.bg-gray-200
|
|
gray-100
|
oklch(0.87 0.006 264.364)
|
var(--color-gray-100)
|
.text-gray-100
|
.bg-gray-100
|
|
gray-50
|
oklch(0.95 0.002 264.364)
|
var(--color-gray-50)
|
.text-gray-50
|
.bg-gray-50
|
|
zinc-950
|
oklch(0.152 0.005 285.938)
|
var(--color-zinc-950)
|
.text-zinc-950
|
.bg-zinc-950
|
|
zinc-900
|
oklch(0.231 0.007 285.938)
|
var(--color-zinc-900)
|
.text-zinc-900
|
.bg-zinc-900
|
|
zinc-800
|
oklch(0.311 0.01 285.938)
|
var(--color-zinc-800)
|
.text-zinc-800
|
.bg-zinc-800
|
|
zinc-700
|
oklch(0.391 0.012 285.938)
|
var(--color-zinc-700)
|
.text-zinc-700
|
.bg-zinc-700
|
|
zinc-600
|
oklch(0.471 0.014 285.938)
|
var(--color-zinc-600)
|
.text-zinc-600
|
.bg-zinc-600
|
|
zinc-500
|
oklch(0.551 0.014 285.938)
|
var(--color-zinc-500)
|
.text-zinc-500
|
.bg-zinc-500
|
|
zinc-400
|
oklch(0.631 0.011 285.938)
|
var(--color-zinc-400)
|
.text-zinc-400
|
.bg-zinc-400
|
|
zinc-300
|
oklch(0.71 0.008 285.938)
|
var(--color-zinc-300)
|
.text-zinc-300
|
.bg-zinc-300
|
|
zinc-200
|
oklch(0.79 0.006 285.938)
|
var(--color-zinc-200)
|
.text-zinc-200
|
.bg-zinc-200
|
|
zinc-100
|
oklch(0.87 0.004 285.938)
|
var(--color-zinc-100)
|
.text-zinc-100
|
.bg-zinc-100
|
|
zinc-50
|
oklch(0.95 0.001 285.938)
|
var(--color-zinc-50)
|
.text-zinc-50
|
.bg-zinc-50
|
|
neutral-950
|
oklch(0.156 0 0)
|
var(--color-neutral-950)
|
.text-neutral-950
|
.bg-neutral-950
|
|
neutral-900
|
oklch(0.235 0 0)
|
var(--color-neutral-900)
|
.text-neutral-900
|
.bg-neutral-900
|
|
neutral-800
|
oklch(0.314 0 0)
|
var(--color-neutral-800)
|
.text-neutral-800
|
.bg-neutral-800
|
|
neutral-700
|
oklch(0.394 0 0)
|
var(--color-neutral-700)
|
.text-neutral-700
|
.bg-neutral-700
|
|
neutral-600
|
oklch(0.473 0 0)
|
var(--color-neutral-600)
|
.text-neutral-600
|
.bg-neutral-600
|
|
neutral-500
|
oklch(0.553 0 0)
|
var(--color-neutral-500)
|
.text-neutral-500
|
.bg-neutral-500
|
|
neutral-400
|
oklch(0.632 0 0)
|
var(--color-neutral-400)
|
.text-neutral-400
|
.bg-neutral-400
|
|
neutral-300
|
oklch(0.712 0 0)
|
var(--color-neutral-300)
|
.text-neutral-300
|
.bg-neutral-300
|
|
neutral-200
|
oklch(0.791 0 0)
|
var(--color-neutral-200)
|
.text-neutral-200
|
.bg-neutral-200
|
|
neutral-100
|
oklch(0.871 0 0)
|
var(--color-neutral-100)
|
.text-neutral-100
|
.bg-neutral-100
|
|
neutral-50
|
oklch(0.95 0 0)
|
var(--color-neutral-50)
|
.text-neutral-50
|
.bg-neutral-50
|
|
stone-950
|
oklch(0.153 0.003 58.071)
|
var(--color-stone-950)
|
.text-stone-950
|
.bg-stone-950
|
|
stone-900
|
oklch(0.233 0.005 58.071)
|
var(--color-stone-900)
|
.text-stone-900
|
.bg-stone-900
|
|
stone-800
|
oklch(0.313 0.007 58.071)
|
var(--color-stone-800)
|
.text-stone-800
|
.bg-stone-800
|
|
stone-700
|
oklch(0.392 0.008 58.071)
|
var(--color-stone-700)
|
.text-stone-700
|
.bg-stone-700
|
|
stone-600
|
oklch(0.472 0.01 58.071)
|
var(--color-stone-600)
|
.text-stone-600
|
.bg-stone-600
|
|
stone-500
|
oklch(0.552 0.012 58.071)
|
var(--color-stone-500)
|
.text-stone-500
|
.bg-stone-500
|
|
stone-400
|
oklch(0.631 0.013 58.071)
|
var(--color-stone-400)
|
.text-stone-400
|
.bg-stone-400
|
|
stone-300
|
oklch(0.711 0.015 58.071)
|
var(--color-stone-300)
|
.text-stone-300
|
.bg-stone-300
|
|
stone-200
|
oklch(0.791 0.013 58.071)
|
var(--color-stone-200)
|
.text-stone-200
|
.bg-stone-200
|
|
stone-100
|
oklch(0.87 0.007 58.071)
|
var(--color-stone-100)
|
.text-stone-100
|
.bg-stone-100
|
|
stone-50
|
oklch(0.95 0.003 58.071)
|
var(--color-stone-50)
|
.text-stone-50
|
.bg-stone-50
|
|
red-950
|
oklch(0.237 0.08 25.331)
|
var(--color-red-950)
|
.text-red-950
|
.bg-red-950
|
|
red-900
|
oklch(0.308 0.105 25.331)
|
var(--color-red-900)
|
.text-red-900
|
.bg-red-900
|
|
red-800
|
oklch(0.379 0.129 25.331)
|
var(--color-red-800)
|
.text-red-800
|
.bg-red-800
|
|
red-700
|
oklch(0.451 0.153 25.331)
|
var(--color-red-700)
|
.text-red-700
|
.bg-red-700
|
|
red-600
|
oklch(0.522 0.177 25.331)
|
var(--color-red-600)
|
.text-red-600
|
.bg-red-600
|
|
red-500
|
oklch(0.593 0.201 25.331)
|
var(--color-red-500)
|
.text-red-500
|
.bg-red-500
|
|
red-400
|
oklch(0.665 0.186 25.331)
|
var(--color-red-400)
|
.text-red-400
|
.bg-red-400
|
|
red-300
|
oklch(0.736 0.135 25.331)
|
var(--color-red-300)
|
.text-red-300
|
.bg-red-300
|
|
red-200
|
oklch(0.807 0.091 25.331)
|
var(--color-red-200)
|
.text-red-200
|
.bg-red-200
|
|
red-100
|
oklch(0.879 0.054 25.331)
|
var(--color-red-100)
|
.text-red-100
|
.bg-red-100
|
|
red-50
|
oklch(0.95 0.021 25.331)
|
var(--color-red-50)
|
.text-red-50
|
.bg-red-50
|
|
orange-950
|
oklch(0.305 0.081 47.604)
|
var(--color-orange-950)
|
.text-orange-950
|
.bg-orange-950
|
|
orange-900
|
oklch(0.369 0.098 47.604)
|
var(--color-orange-900)
|
.text-orange-900
|
.bg-orange-900
|
|
orange-800
|
oklch(0.434 0.115 47.604)
|
var(--color-orange-800)
|
.text-orange-800
|
.bg-orange-800
|
|
orange-700
|
oklch(0.498 0.132 47.604)
|
var(--color-orange-700)
|
.text-orange-700
|
.bg-orange-700
|
|
orange-600
|
oklch(0.563 0.149 47.604)
|
var(--color-orange-600)
|
.text-orange-600
|
.bg-orange-600
|
|
orange-500
|
oklch(0.627 0.166 47.604)
|
var(--color-orange-500)
|
.text-orange-500
|
.bg-orange-500
|
|
orange-400
|
oklch(0.692 0.183 47.604)
|
var(--color-orange-400)
|
.text-orange-400
|
.bg-orange-400
|
|
orange-300
|
oklch(0.756 0.153 47.604)
|
var(--color-orange-300)
|
.text-orange-300
|
.bg-orange-300
|
|
orange-200
|
oklch(0.821 0.106 47.604)
|
var(--color-orange-200)
|
.text-orange-200
|
.bg-orange-200
|
|
orange-100
|
oklch(0.885 0.064 47.604)
|
var(--color-orange-100)
|
.text-orange-100
|
.bg-orange-100
|
|
orange-50
|
oklch(0.95 0.026 47.604)
|
var(--color-orange-50)
|
.text-orange-50
|
.bg-orange-50
|
|
amber-950
|
oklch(0.369 0.079 70.08)
|
var(--color-amber-950)
|
.text-amber-950
|
.bg-amber-950
|
|
amber-900
|
oklch(0.427 0.091 70.08)
|
var(--color-amber-900)
|
.text-amber-900
|
.bg-amber-900
|
|
amber-800
|
oklch(0.485 0.104 70.08)
|
var(--color-amber-800)
|
.text-amber-800
|
.bg-amber-800
|
|
amber-700
|
oklch(0.543 0.116 70.08)
|
var(--color-amber-700)
|
.text-amber-700
|
.bg-amber-700
|
|
amber-600
|
oklch(0.601 0.129 70.08)
|
var(--color-amber-600)
|
.text-amber-600
|
.bg-amber-600
|
|
amber-500
|
oklch(0.659 0.141 70.08)
|
var(--color-amber-500)
|
.text-amber-500
|
.bg-amber-500
|
|
amber-400
|
oklch(0.717 0.154 70.08)
|
var(--color-amber-400)
|
.text-amber-400
|
.bg-amber-400
|
|
amber-300
|
oklch(0.776 0.166 70.08)
|
var(--color-amber-300)
|
.text-amber-300
|
.bg-amber-300
|
|
amber-200
|
oklch(0.834 0.13 70.08)
|
var(--color-amber-200)
|
.text-amber-200
|
.bg-amber-200
|
|
amber-100
|
oklch(0.892 0.081 70.08)
|
var(--color-amber-100)
|
.text-amber-100
|
.bg-amber-100
|
|
amber-50
|
oklch(0.95 0.036 70.08)
|
var(--color-amber-50)
|
.text-amber-50
|
.bg-amber-50
|
|
yellow-950
|
oklch(0.395 0.08 86.047)
|
var(--color-yellow-950)
|
.text-yellow-950
|
.bg-yellow-950
|
|
yellow-900
|
oklch(0.451 0.092 86.047)
|
var(--color-yellow-900)
|
.text-yellow-900
|
.bg-yellow-900
|
|
yellow-800
|
oklch(0.506 0.103 86.047)
|
var(--color-yellow-800)
|
.text-yellow-800
|
.bg-yellow-800
|
|
yellow-700
|
oklch(0.562 0.114 86.047)
|
var(--color-yellow-700)
|
.text-yellow-700
|
.bg-yellow-700
|
|
yellow-600
|
oklch(0.617 0.125 86.047)
|
var(--color-yellow-600)
|
.text-yellow-600
|
.bg-yellow-600
|
|
yellow-500
|
oklch(0.673 0.137 86.047)
|
var(--color-yellow-500)
|
.text-yellow-500
|
.bg-yellow-500
|
|
yellow-400
|
oklch(0.728 0.148 86.047)
|
var(--color-yellow-400)
|
.text-yellow-400
|
.bg-yellow-400
|
|
yellow-300
|
oklch(0.784 0.159 86.047)
|
var(--color-yellow-300)
|
.text-yellow-300
|
.bg-yellow-300
|
|
yellow-200
|
oklch(0.839 0.171 86.047)
|
var(--color-yellow-200)
|
.text-yellow-200
|
.bg-yellow-200
|
|
yellow-100
|
oklch(0.895 0.117 86.047)
|
var(--color-yellow-100)
|
.text-yellow-100
|
.bg-yellow-100
|
|
yellow-50
|
oklch(0.95 0.054 86.047)
|
var(--color-yellow-50)
|
.text-yellow-50
|
.bg-yellow-50
|
|
lime-950
|
oklch(0.368 0.098 130.85)
|
var(--color-lime-950)
|
.text-lime-950
|
.bg-lime-950
|
|
lime-900
|
oklch(0.426 0.113 130.85)
|
var(--color-lime-900)
|
.text-lime-900
|
.bg-lime-900
|
|
lime-800
|
oklch(0.485 0.129 130.85)
|
var(--color-lime-800)
|
.text-lime-800
|
.bg-lime-800
|
|
lime-700
|
oklch(0.543 0.144 130.85)
|
var(--color-lime-700)
|
.text-lime-700
|
.bg-lime-700
|
|
lime-600
|
oklch(0.601 0.16 130.85)
|
var(--color-lime-600)
|
.text-lime-600
|
.bg-lime-600
|
|
lime-500
|
oklch(0.659 0.175 130.85)
|
var(--color-lime-500)
|
.text-lime-500
|
.bg-lime-500
|
|
lime-400
|
oklch(0.717 0.191 130.85)
|
var(--color-lime-400)
|
.text-lime-400
|
.bg-lime-400
|
|
lime-300
|
oklch(0.775 0.206 130.85)
|
var(--color-lime-300)
|
.text-lime-300
|
.bg-lime-300
|
|
lime-200
|
oklch(0.834 0.222 130.85)
|
var(--color-lime-200)
|
.text-lime-200
|
.bg-lime-200
|
|
lime-100
|
oklch(0.892 0.237 130.85)
|
var(--color-lime-100)
|
.text-lime-100
|
.bg-lime-100
|
|
lime-50
|
oklch(0.95 0.113 130.85)
|
var(--color-lime-50)
|
.text-lime-50
|
.bg-lime-50
|
|
green-950
|
oklch(0.323 0.086 149.579)
|
var(--color-green-950)
|
.text-green-950
|
.bg-green-950
|
|
green-900
|
oklch(0.385 0.102 149.579)
|
var(--color-green-900)
|
.text-green-900
|
.bg-green-900
|
|
green-800
|
oklch(0.448 0.119 149.579)
|
var(--color-green-800)
|
.text-green-800
|
.bg-green-800
|
|
green-700
|
oklch(0.511 0.136 149.579)
|
var(--color-green-700)
|
.text-green-700
|
.bg-green-700
|
|
green-600
|
oklch(0.574 0.152 149.579)
|
var(--color-green-600)
|
.text-green-600
|
.bg-green-600
|
|
green-500
|
oklch(0.636 0.169 149.579)
|
var(--color-green-500)
|
.text-green-500
|
.bg-green-500
|
|
green-400
|
oklch(0.699 0.186 149.579)
|
var(--color-green-400)
|
.text-green-400
|
.bg-green-400
|
|
green-300
|
oklch(0.762 0.202 149.579)
|
var(--color-green-300)
|
.text-green-300
|
.bg-green-300
|
|
green-200
|
oklch(0.825 0.219 149.579)
|
var(--color-green-200)
|
.text-green-200
|
.bg-green-200
|
|
green-100
|
oklch(0.887 0.201 149.579)
|
var(--color-green-100)
|
.text-green-100
|
.bg-green-100
|
|
green-50
|
oklch(0.95 0.08 149.579)
|
var(--color-green-50)
|
.text-green-50
|
.bg-green-50
|
|
emerald-950
|
oklch(0.296 0.063 162.48)
|
var(--color-emerald-950)
|
.text-emerald-950
|
.bg-emerald-950
|
|
emerald-900
|
oklch(0.361 0.077 162.48)
|
var(--color-emerald-900)
|
.text-emerald-900
|
.bg-emerald-900
|
|
emerald-800
|
oklch(0.427 0.091 162.48)
|
var(--color-emerald-800)
|
.text-emerald-800
|
.bg-emerald-800
|
|
emerald-700
|
oklch(0.492 0.105 162.48)
|
var(--color-emerald-700)
|
.text-emerald-700
|
.bg-emerald-700
|
|
emerald-600
|
oklch(0.558 0.119 162.48)
|
var(--color-emerald-600)
|
.text-emerald-600
|
.bg-emerald-600
|
|
emerald-500
|
oklch(0.623 0.133 162.48)
|
var(--color-emerald-500)
|
.text-emerald-500
|
.bg-emerald-500
|
|
emerald-400
|
oklch(0.688 0.147 162.48)
|
var(--color-emerald-400)
|
.text-emerald-400
|
.bg-emerald-400
|
|
emerald-300
|
oklch(0.754 0.161 162.48)
|
var(--color-emerald-300)
|
.text-emerald-300
|
.bg-emerald-300
|
|
emerald-200
|
oklch(0.819 0.175 162.48)
|
var(--color-emerald-200)
|
.text-emerald-200
|
.bg-emerald-200
|
|
emerald-100
|
oklch(0.885 0.189 162.48)
|
var(--color-emerald-100)
|
.text-emerald-100
|
.bg-emerald-100
|
|
emerald-50
|
oklch(0.95 0.074 162.48)
|
var(--color-emerald-50)
|
.text-emerald-50
|
.bg-emerald-50
|
|
teal-950
|
oklch(0.304 0.053 182.503)
|
var(--color-teal-950)
|
.text-teal-950
|
.bg-teal-950
|
|
teal-900
|
oklch(0.368 0.064 182.503)
|
var(--color-teal-900)
|
.text-teal-900
|
.bg-teal-900
|
|
teal-800
|
oklch(0.433 0.076 182.503)
|
var(--color-teal-800)
|
.text-teal-800
|
.bg-teal-800
|
|
teal-700
|
oklch(0.498 0.087 182.503)
|
var(--color-teal-700)
|
.text-teal-700
|
.bg-teal-700
|
|
teal-600
|
oklch(0.562 0.098 182.503)
|
var(--color-teal-600)
|
.text-teal-600
|
.bg-teal-600
|
|
teal-500
|
oklch(0.627 0.11 182.503)
|
var(--color-teal-500)
|
.text-teal-500
|
.bg-teal-500
|
|
teal-400
|
oklch(0.692 0.121 182.503)
|
var(--color-teal-400)
|
.text-teal-400
|
.bg-teal-400
|
|
teal-300
|
oklch(0.756 0.132 182.503)
|
var(--color-teal-300)
|
.text-teal-300
|
.bg-teal-300
|
|
teal-200
|
oklch(0.821 0.143 182.503)
|
var(--color-teal-200)
|
.text-teal-200
|
.bg-teal-200
|
|
teal-100
|
oklch(0.885 0.155 182.503)
|
var(--color-teal-100)
|
.text-teal-100
|
.bg-teal-100
|
|
teal-50
|
oklch(0.95 0.07 182.503)
|
var(--color-teal-50)
|
.text-teal-50
|
.bg-teal-50
|
|
cyan-950
|
oklch(0.315 0.055 215.221)
|
var(--color-cyan-950)
|
.text-cyan-950
|
.bg-cyan-950
|
|
cyan-900
|
oklch(0.378 0.067 215.221)
|
var(--color-cyan-900)
|
.text-cyan-900
|
.bg-cyan-900
|
|
cyan-800
|
oklch(0.442 0.078 215.221)
|
var(--color-cyan-800)
|
.text-cyan-800
|
.bg-cyan-800
|
|
cyan-700
|
oklch(0.505 0.089 215.221)
|
var(--color-cyan-700)
|
.text-cyan-700
|
.bg-cyan-700
|
|
cyan-600
|
oklch(0.569 0.1 215.221)
|
var(--color-cyan-600)
|
.text-cyan-600
|
.bg-cyan-600
|
|
cyan-500
|
oklch(0.632 0.111 215.221)
|
var(--color-cyan-500)
|
.text-cyan-500
|
.bg-cyan-500
|
|
cyan-400
|
oklch(0.696 0.122 215.221)
|
var(--color-cyan-400)
|
.text-cyan-400
|
.bg-cyan-400
|
|
cyan-300
|
oklch(0.759 0.134 215.221)
|
var(--color-cyan-300)
|
.text-cyan-300
|
.bg-cyan-300
|
|
cyan-200
|
oklch(0.823 0.143 215.221)
|
var(--color-cyan-200)
|
.text-cyan-200
|
.bg-cyan-200
|
|
cyan-100
|
oklch(0.886 0.089 215.221)
|
var(--color-cyan-100)
|
.text-cyan-100
|
.bg-cyan-100
|
|
cyan-50
|
oklch(0.95 0.039 215.221)
|
var(--color-cyan-50)
|
.text-cyan-50
|
.bg-cyan-50
|
|
sky-950
|
oklch(0.285 0.061 237.323)
|
var(--color-sky-950)
|
.text-sky-950
|
.bg-sky-950
|
|
sky-900
|
oklch(0.351 0.076 237.323)
|
var(--color-sky-900)
|
.text-sky-900
|
.bg-sky-900
|
|
sky-800
|
oklch(0.418 0.09 237.323)
|
var(--color-sky-800)
|
.text-sky-800
|
.bg-sky-800
|
|
sky-700
|
oklch(0.484 0.105 237.323)
|
var(--color-sky-700)
|
.text-sky-700
|
.bg-sky-700
|
|
sky-600
|
oklch(0.551 0.119 237.323)
|
var(--color-sky-600)
|
.text-sky-600
|
.bg-sky-600
|
|
sky-500
|
oklch(0.617 0.133 237.323)
|
var(--color-sky-500)
|
.text-sky-500
|
.bg-sky-500
|
|
sky-400
|
oklch(0.684 0.148 237.323)
|
var(--color-sky-400)
|
.text-sky-400
|
.bg-sky-400
|
|
sky-300
|
oklch(0.75 0.145 237.323)
|
var(--color-sky-300)
|
.text-sky-300
|
.bg-sky-300
|
|
sky-200
|
oklch(0.817 0.104 237.323)
|
var(--color-sky-200)
|
.text-sky-200
|
.bg-sky-200
|
|
sky-100
|
oklch(0.883 0.064 237.323)
|
var(--color-sky-100)
|
.text-sky-100
|
.bg-sky-100
|
|
sky-50
|
oklch(0.95 0.027 237.323)
|
var(--color-sky-50)
|
.text-sky-50
|
.bg-sky-50
|
|
blue-950
|
oklch(0.223 0.083 259.815)
|
var(--color-blue-950)
|
.text-blue-950
|
.bg-blue-950
|
|
blue-900
|
oklch(0.296 0.11 259.815)
|
var(--color-blue-900)
|
.text-blue-900
|
.bg-blue-900
|
|
blue-800
|
oklch(0.368 0.137 259.815)
|
var(--color-blue-800)
|
.text-blue-800
|
.bg-blue-800
|
|
blue-700
|
oklch(0.441 0.164 259.815)
|
var(--color-blue-700)
|
.text-blue-700
|
.bg-blue-700
|
|
blue-600
|
oklch(0.514 0.192 259.815)
|
var(--color-blue-600)
|
.text-blue-600
|
.bg-blue-600
|
|
blue-500
|
oklch(0.587 0.209 259.815)
|
var(--color-blue-500)
|
.text-blue-500
|
.bg-blue-500
|
|
blue-400
|
oklch(0.659 0.168 259.815)
|
var(--color-blue-400)
|
.text-blue-400
|
.bg-blue-400
|
|
blue-300
|
oklch(0.732 0.128 259.815)
|
var(--color-blue-300)
|
.text-blue-300
|
.bg-blue-300
|
|
blue-200
|
oklch(0.805 0.091 259.815)
|
var(--color-blue-200)
|
.text-blue-200
|
.bg-blue-200
|
|
blue-100
|
oklch(0.877 0.055 259.815)
|
var(--color-blue-100)
|
.text-blue-100
|
.bg-blue-100
|
|
blue-50
|
oklch(0.95 0.022 259.815)
|
var(--color-blue-50)
|
.text-blue-50
|
.bg-blue-50
|
|
indigo-950
|
oklch(0.185 0.102 277.117)
|
var(--color-indigo-950)
|
.text-indigo-950
|
.bg-indigo-950
|
|
indigo-900
|
oklch(0.262 0.144 277.117)
|
var(--color-indigo-900)
|
.text-indigo-900
|
.bg-indigo-900
|
|
indigo-800
|
oklch(0.338 0.186 277.117)
|
var(--color-indigo-800)
|
.text-indigo-800
|
.bg-indigo-800
|
|
indigo-700
|
oklch(0.415 0.228 277.117)
|
var(--color-indigo-700)
|
.text-indigo-700
|
.bg-indigo-700
|
|
indigo-600
|
oklch(0.491 0.259 277.117)
|
var(--color-indigo-600)
|
.text-indigo-600
|
.bg-indigo-600
|
|
indigo-500
|
oklch(0.568 0.214 277.117)
|
var(--color-indigo-500)
|
.text-indigo-500
|
.bg-indigo-500
|
|
indigo-400
|
oklch(0.644 0.171 277.117)
|
var(--color-indigo-400)
|
.text-indigo-400
|
.bg-indigo-400
|
|
indigo-300
|
oklch(0.721 0.13 277.117)
|
var(--color-indigo-300)
|
.text-indigo-300
|
.bg-indigo-300
|
|
indigo-200
|
oklch(0.797 0.092 277.117)
|
var(--color-indigo-200)
|
.text-indigo-200
|
.bg-indigo-200
|
|
indigo-100
|
oklch(0.874 0.055 277.117)
|
var(--color-indigo-100)
|
.text-indigo-100
|
.bg-indigo-100
|
|
indigo-50
|
oklch(0.95 0.021 277.117)
|
var(--color-indigo-50)
|
.text-indigo-50
|
.bg-indigo-50
|
|
violet-950
|
oklch(0.206 0.106 292.717)
|
var(--color-violet-950)
|
.text-violet-950
|
.bg-violet-950
|
|
violet-900
|
oklch(0.28 0.144 292.717)
|
var(--color-violet-900)
|
.text-violet-900
|
.bg-violet-900
|
|
violet-800
|
oklch(0.355 0.183 292.717)
|
var(--color-violet-800)
|
.text-violet-800
|
.bg-violet-800
|
|
violet-700
|
oklch(0.429 0.221 292.717)
|
var(--color-violet-700)
|
.text-violet-700
|
.bg-violet-700
|
|
violet-600
|
oklch(0.503 0.259 292.717)
|
var(--color-violet-600)
|
.text-violet-600
|
.bg-violet-600
|
|
violet-500
|
oklch(0.578 0.237 292.717)
|
var(--color-violet-500)
|
.text-violet-500
|
.bg-violet-500
|
|
violet-400
|
oklch(0.652 0.189 292.717)
|
var(--color-violet-400)
|
.text-violet-400
|
.bg-violet-400
|
|
violet-300
|
oklch(0.727 0.144 292.717)
|
var(--color-violet-300)
|
.text-violet-300
|
.bg-violet-300
|
|
violet-200
|
oklch(0.801 0.102 292.717)
|
var(--color-violet-200)
|
.text-violet-200
|
.bg-violet-200
|
|
violet-100
|
oklch(0.876 0.062 292.717)
|
var(--color-violet-100)
|
.text-violet-100
|
.bg-violet-100
|
|
violet-50
|
oklch(0.95 0.024 292.717)
|
var(--color-violet-50)
|
.text-violet-50
|
.bg-violet-50
|
|
purple-950
|
oklch(0.227 0.11 303.9)
|
var(--color-purple-950)
|
.text-purple-950
|
.bg-purple-950
|
|
purple-900
|
oklch(0.299 0.145 303.9)
|
var(--color-purple-900)
|
.text-purple-900
|
.bg-purple-900
|
|
purple-800
|
oklch(0.371 0.181 303.9)
|
var(--color-purple-800)
|
.text-purple-800
|
.bg-purple-800
|
|
purple-700
|
oklch(0.444 0.216 303.9)
|
var(--color-purple-700)
|
.text-purple-700
|
.bg-purple-700
|
|
purple-600
|
oklch(0.516 0.251 303.9)
|
var(--color-purple-600)
|
.text-purple-600
|
.bg-purple-600
|
|
purple-500
|
oklch(0.588 0.261 303.9)
|
var(--color-purple-500)
|
.text-purple-500
|
.bg-purple-500
|
|
purple-400
|
oklch(0.661 0.208 303.9)
|
var(--color-purple-400)
|
.text-purple-400
|
.bg-purple-400
|
|
purple-300
|
oklch(0.733 0.159 303.9)
|
var(--color-purple-300)
|
.text-purple-300
|
.bg-purple-300
|
|
purple-200
|
oklch(0.805 0.112 303.9)
|
var(--color-purple-200)
|
.text-purple-200
|
.bg-purple-200
|
|
purple-100
|
oklch(0.878 0.068 303.9)
|
var(--color-purple-100)
|
.text-purple-100
|
.bg-purple-100
|
|
purple-50
|
oklch(0.95 0.027 303.9)
|
var(--color-purple-50)
|
.text-purple-50
|
.bg-purple-50
|
|
fuchsia-950
|
oklch(0.267 0.107 322.15)
|
var(--color-fuchsia-950)
|
.text-fuchsia-950
|
.bg-fuchsia-950
|
|
fuchsia-900
|
oklch(0.335 0.134 322.15)
|
var(--color-fuchsia-900)
|
.text-fuchsia-900
|
.bg-fuchsia-900
|
|
fuchsia-800
|
oklch(0.403 0.161 322.15)
|
var(--color-fuchsia-800)
|
.text-fuchsia-800
|
.bg-fuchsia-800
|
|
fuchsia-700
|
oklch(0.472 0.189 322.15)
|
var(--color-fuchsia-700)
|
.text-fuchsia-700
|
.bg-fuchsia-700
|
|
fuchsia-600
|
oklch(0.54 0.216 322.15)
|
var(--color-fuchsia-600)
|
.text-fuchsia-600
|
.bg-fuchsia-600
|
|
fuchsia-500
|
oklch(0.608 0.243 322.15)
|
var(--color-fuchsia-500)
|
.text-fuchsia-500
|
.bg-fuchsia-500
|
|
fuchsia-400
|
oklch(0.677 0.25 322.15)
|
var(--color-fuchsia-400)
|
.text-fuchsia-400
|
.bg-fuchsia-400
|
|
fuchsia-300
|
oklch(0.745 0.191 322.15)
|
var(--color-fuchsia-300)
|
.text-fuchsia-300
|
.bg-fuchsia-300
|
|
fuchsia-200
|
oklch(0.813 0.136 322.15)
|
var(--color-fuchsia-200)
|
.text-fuchsia-200
|
.bg-fuchsia-200
|
|
fuchsia-100
|
oklch(0.882 0.083 322.15)
|
var(--color-fuchsia-100)
|
.text-fuchsia-100
|
.bg-fuchsia-100
|
|
fuchsia-50
|
oklch(0.95 0.034 322.15)
|
var(--color-fuchsia-50)
|
.text-fuchsia-50
|
.bg-fuchsia-50
|
|
pink-950
|
oklch(0.256 0.084 354.308)
|
var(--color-pink-950)
|
.text-pink-950
|
.bg-pink-950
|
|
pink-900
|
oklch(0.325 0.106 354.308)
|
var(--color-pink-900)
|
.text-pink-900
|
.bg-pink-900
|
|
pink-800
|
oklch(0.395 0.129 354.308)
|
var(--color-pink-800)
|
.text-pink-800
|
.bg-pink-800
|
|
pink-700
|
oklch(0.464 0.152 354.308)
|
var(--color-pink-700)
|
.text-pink-700
|
.bg-pink-700
|
|
pink-600
|
oklch(0.534 0.174 354.308)
|
var(--color-pink-600)
|
.text-pink-600
|
.bg-pink-600
|
|
pink-500
|
oklch(0.603 0.197 354.308)
|
var(--color-pink-500)
|
.text-pink-500
|
.bg-pink-500
|
|
pink-400
|
oklch(0.672 0.197 354.308)
|
var(--color-pink-400)
|
.text-pink-400
|
.bg-pink-400
|
|
pink-300
|
oklch(0.742 0.143 354.308)
|
var(--color-pink-300)
|
.text-pink-300
|
.bg-pink-300
|
|
pink-200
|
oklch(0.811 0.097 354.308)
|
var(--color-pink-200)
|
.text-pink-200
|
.bg-pink-200
|
|
pink-100
|
oklch(0.881 0.057 354.308)
|
var(--color-pink-100)
|
.text-pink-100
|
.bg-pink-100
|
|
pink-50
|
oklch(0.95 0.022 354.308)
|
var(--color-pink-50)
|
.text-pink-50
|
.bg-pink-50
|
|
rose-950
|
oklch(0.245 0.087 16.439)
|
var(--color-rose-950)
|
.text-rose-950
|
.bg-rose-950
|
|
rose-900
|
oklch(0.316 0.112 16.439)
|
var(--color-rose-900)
|
.text-rose-900
|
.bg-rose-900
|
|
rose-800
|
oklch(0.386 0.137 16.439)
|
var(--color-rose-800)
|
.text-rose-800
|
.bg-rose-800
|
|
rose-700
|
oklch(0.457 0.161 16.439)
|
var(--color-rose-700)
|
.text-rose-700
|
.bg-rose-700
|
|
rose-600
|
oklch(0.527 0.186 16.439)
|
var(--color-rose-600)
|
.text-rose-600
|
.bg-rose-600
|
|
rose-500
|
oklch(0.598 0.211 16.439)
|
var(--color-rose-500)
|
.text-rose-500
|
.bg-rose-500
|
|
rose-400
|
oklch(0.668 0.196 16.439)
|
var(--color-rose-400)
|
.text-rose-400
|
.bg-rose-400
|
|
rose-300
|
oklch(0.739 0.142 16.439)
|
var(--color-rose-300)
|
.text-rose-300
|
.bg-rose-300
|
|
rose-200
|
oklch(0.809 0.096 16.439)
|
var(--color-rose-200)
|
.text-rose-200
|
.bg-rose-200
|
|
rose-100
|
oklch(0.88 0.057 16.439)
|
var(--color-rose-100)
|
.text-rose-100
|
.bg-rose-100
|
|
rose-50
|
oklch(0.95 0.022 16.439)
|
var(--color-rose-50)
|
.text-rose-50
|
.bg-rose-50
|
Gonk Design: Pattern Library