colors

Learn how to work with our color system. Right click to copy raw values.

size

There are 10 color scales in the system. P3 colors are used on supported browsers and displays.

background

gray

bg-kui-light-gray-100 dark:bg-kui-dark-gray-100
bg-kui-light-gray-200 dark:bg-kui-dark-gray-200
bg-kui-light-gray-300 dark:bg-kui-dark-gray-300
bg-kui-light-gray-400 dark:bg-kui-dark-gray-400
bg-kui-light-gray-500 dark:bg-kui-dark-gray-500
bg-kui-light-gray-600 dark:bg-kui-dark-gray-600
bg-kui-light-gray-700 dark:bg-kui-dark-gray-700
bg-kui-light-gray-800 dark:bg-kui-dark-gray-800
bg-kui-light-gray-900 dark:bg-kui-dark-gray-900
bg-kui-light-gray-1000 dark:bg-kui-dark-gray-1000

gray alpha

bg-kui-light-gray-alpha-100 dark:bg-kui-dark-gray-alpha-100
bg-kui-light-gray-alpha-200 dark:bg-kui-dark-gray-alpha-200
bg-kui-light-gray-alpha-300 dark:bg-kui-dark-gray-alpha-300
bg-kui-light-gray-alpha-400 dark:bg-kui-dark-gray-alpha-400
bg-kui-light-gray-alpha-500 dark:bg-kui-dark-gray-alpha-500
bg-kui-light-gray-alpha-600 dark:bg-kui-dark-gray-alpha-600
bg-kui-light-gray-alpha-700 dark:bg-kui-dark-gray-alpha-700
bg-kui-light-gray-alpha-800 dark:bg-kui-dark-gray-alpha-800
bg-kui-light-gray-alpha-900 dark:bg-kui-dark-gray-alpha-900
bg-kui-light-gray-alpha-1000 dark:bg-kui-dark-gray-alpha-1000

blue

bg-kui-light-blue-100 dark:bg-kui-dark-blue-100
bg-kui-light-blue-200 dark:bg-kui-dark-blue-200
bg-kui-light-blue-300 dark:bg-kui-dark-blue-300
bg-kui-light-blue-400 dark:bg-kui-dark-blue-400
bg-kui-light-blue-500 dark:bg-kui-dark-blue-500
bg-kui-light-blue-600 dark:bg-kui-dark-blue-600
bg-kui-light-blue-700 dark:bg-kui-dark-blue-700
bg-kui-light-blue-800 dark:bg-kui-dark-blue-800
bg-kui-light-blue-900 dark:bg-kui-dark-blue-900
bg-kui-light-blue-1000 dark:bg-kui-dark-blue-1000

red

bg-kui-light-red-100 dark:bg-kui-dark-red-100
bg-kui-light-red-200 dark:bg-kui-dark-red-200
bg-kui-light-red-300 dark:bg-kui-dark-red-300
bg-kui-light-red-400 dark:bg-kui-dark-red-400
bg-kui-light-red-500 dark:bg-kui-dark-red-500
bg-kui-light-red-600 dark:bg-kui-dark-red-600
bg-kui-light-red-700 dark:bg-kui-dark-red-700
bg-kui-light-red-800 dark:bg-kui-dark-red-800
bg-kui-light-red-900 dark:bg-kui-dark-red-900
bg-kui-light-red-1000 dark:bg-kui-dark-red-1000

amber

bg-kui-light-amber-100 dark:bg-kui-dark-amber-100
bg-kui-light-amber-200 dark:bg-kui-dark-amber-200
bg-kui-light-amber-300 dark:bg-kui-dark-amber-300
bg-kui-light-amber-400 dark:bg-kui-dark-amber-400
bg-kui-light-amber-500 dark:bg-kui-dark-amber-500
bg-kui-light-amber-600 dark:bg-kui-dark-amber-600
bg-kui-light-amber-700 dark:bg-kui-dark-amber-700
bg-kui-light-amber-800 dark:bg-kui-dark-amber-800
bg-kui-light-amber-900 dark:bg-kui-dark-amber-900
bg-kui-light-amber-1000 dark:bg-kui-dark-amber-1000

green

bg-kui-light-green-100 dark:bg-kui-dark-green-100
bg-kui-light-green-200 dark:bg-kui-dark-green-200
bg-kui-light-green-300 dark:bg-kui-dark-green-300
bg-kui-light-green-400 dark:bg-kui-dark-green-400
bg-kui-light-green-500 dark:bg-kui-dark-green-500
bg-kui-light-green-600 dark:bg-kui-dark-green-600
bg-kui-light-green-700 dark:bg-kui-dark-green-700
bg-kui-light-green-800 dark:bg-kui-dark-green-800
bg-kui-light-green-900 dark:bg-kui-dark-green-900
bg-kui-light-green-1000 dark:bg-kui-dark-green-1000

teal

bg-kui-light-teal-100 dark:bg-kui-dark-teal-100
bg-kui-light-teal-200 dark:bg-kui-dark-teal-200
bg-kui-light-teal-300 dark:bg-kui-dark-teal-300
bg-kui-light-teal-400 dark:bg-kui-dark-teal-400
bg-kui-light-teal-500 dark:bg-kui-dark-teal-500
bg-kui-light-teal-600 dark:bg-kui-dark-teal-600
bg-kui-light-teal-700 dark:bg-kui-dark-teal-700
bg-kui-light-teal-800 dark:bg-kui-dark-teal-800
bg-kui-light-teal-900 dark:bg-kui-dark-teal-900
bg-kui-light-teal-1000 dark:bg-kui-dark-teal-1000

purple

bg-kui-light-purple-100 dark:bg-kui-dark-purple-100
bg-kui-light-purple-200 dark:bg-kui-dark-purple-200
bg-kui-light-purple-300 dark:bg-kui-dark-purple-300
bg-kui-light-purple-400 dark:bg-kui-dark-purple-400
bg-kui-light-purple-500 dark:bg-kui-dark-purple-500
bg-kui-light-purple-600 dark:bg-kui-dark-purple-600
bg-kui-light-purple-700 dark:bg-kui-dark-purple-700
bg-kui-light-purple-800 dark:bg-kui-dark-purple-800
bg-kui-light-purple-900 dark:bg-kui-dark-purple-900
bg-kui-light-purple-1000 dark:bg-kui-dark-purple-1000

pink

bg-kui-light-pink-100 dark:bg-kui-dark-pink-100
bg-kui-light-pink-200 dark:bg-kui-dark-pink-200
bg-kui-light-pink-300 dark:bg-kui-dark-pink-300
bg-kui-light-pink-400 dark:bg-kui-dark-pink-400
bg-kui-light-pink-500 dark:bg-kui-dark-pink-500
bg-kui-light-pink-600 dark:bg-kui-dark-pink-600
bg-kui-light-pink-700 dark:bg-kui-dark-pink-700
bg-kui-light-pink-800 dark:bg-kui-dark-pink-800
bg-kui-light-pink-900 dark:bg-kui-dark-pink-900
bg-kui-light-pink-1000 dark:bg-kui-dark-pink-1000