Gold & Black Palette
CSS variables
:root {
--color-1: #000000;
--color-2: #14213D;
--color-3: #FCA311;
--color-4: #E5E5E5;
--color-5: #FFFFFF;
}Tailwind config
// tailwind.config.js
colors: {
"gold-black-1": "#000000",
"gold-black-2": "#14213D",
"gold-black-3": "#FCA311",
"gold-black-4": "#E5E5E5",
"gold-black-5": "#FFFFFF",
}About this palette
The Gold & Black palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.
Readable text on each color
White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.
Aa
#000000White21.00:1AAAa
#14213DWhite15.97:1AAAa
#FCA311Near-black9.34:1AAAa
#E5E5E5Near-black15.00:1AAAa
#FFFFFFNear-black18.89:1AAThese colours on each other
12 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \\ background | #000000 | #14213D | #FCA311 | #E5E5E5 | #FFFFFF |
|---|---|---|---|---|---|
| #000000 | 1.31Fails | 10.39AA | 16.67AA | 21.00AA | |
| #14213D | 1.31Fails | 7.90AA | 12.68AA | 15.97AA | |
| #FCA311 | 10.39AA | 7.90AA | 1.61Fails | 2.02Fails | |
| #E5E5E5 | 16.67AA | 12.68AA | 1.61Fails | 1.26Fails | |
| #FFFFFF | 21.00AA | 15.97AA | 2.02Fails | 1.26Fails |
More palettes