Digital Interfaces
Digital interfaces often need lighter and darker variants on a color palette to signify different states or add a subtle presence of color from the official brand palette.
Digital UI Scales
Given the nature of digital interfaces, subtle variations of the palette may be needed for interactive states and other considerations.
gray
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-warm
gray-warm-50
gray-warm-100
gray-warm-200
gray-warm-300
gray-warm-400
gray-warm-500
gray-warm-600
gray-warm-700
gray-warm-800
gray-warm-900
gray-warm-50
gray-warm-100
gray-warm-200
gray-warm-300
gray-warm-400
gray-warm-500
gray-warm-600
gray-warm-700
gray-warm-800
gray-warm-900
gray-cool
gray-cool-50
gray-cool-100
gray-cool-200
gray-cool-300
gray-cool-400
gray-cool-500
gray-cool-600
gray-cool-700
gray-cool-800
gray-cool-900
gray-cool-50
gray-cool-100
gray-cool-200
gray-cool-300
gray-cool-400
gray-cool-500
gray-cool-600
gray-cool-700
gray-cool-800
gray-cool-900
red
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
orange
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
yellow
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
green
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
teal
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
aqua
aqua-50
aqua-100
aqua-200
aqua-300
aqua-400
aqua-500
aqua-600
aqua-700
aqua-800
aqua-900
aqua-50
aqua-100
aqua-200
aqua-300
aqua-400
aqua-500
aqua-600
aqua-700
aqua-800
aqua-900
blue
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
indigo
indigo-50
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-50
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
Semi/Transparent Colors
kernl(ui) provides a transparent and Tailwind's bg-opacity, border-opacity, and divide-opacity classes in combination with kernl(ui)'s opacity scale can be used to compose other semi-transparent classes.
transparent
transparent
rgba(0, 0, 0, 0)
transparent
rgba(0, 0, 0, 0)