Preview
#ffc107
Family: Amber
Accessibility on this swatch:
Contrast vs white: 1.63:1 · vs black: 12.88:1
HEX
#ffc107
RGB
rgb(255, 193, 7)
RGBA
rgba(255, 193, 7, 1)
HSL
hsl(45, 100%, 51%)
HSV
hsv(45, 97%, 100%)
LAB
lab(81.52% 9.4 82.69)
LCH
lch(81.52% 83.22 83.51)
OKLAB
oklab(0.8442 0.0152 0.1715)
OKLCH
oklch(0.8442 0.1722 84.94)
XYZ
xyz(60.35, 59.42, 8.49)
CMYK
cmyk(0%, 24%, 97%, 0%)
CSS
color: #ffc107;
CSS variable
--color-ffc107: #ffc107;
SCSS
$color-ffc107: #ffc107;
Tailwind
orange-400
Export
:root {
--bootstrap-warning-1: #ffc107;
}Confidence, warmth, and caution. Useful for notifications and premium earthy palettes.
Usage examples: primary buttons, chart series, status badges, marketing gradients, and brand accents in the Amber family.