Black and Orange color palette
black
coral · 0.042
Halloween displays, construction signage, and Harley-Davidson tanks all reach for this combination because of glare. At a 7.06:1 ratio, the bright #F97316 orange snaps against the near-black #0A0A0A hard enough to read across a parking lot.
The black is essentially neutral, so the pairing is really about lightness: a deep base with one hot accent on top. That suits posters where a single headline must dominate, and web hero sections where one call-to-action button needs to pull the eye.
For branding it reads energetic and a little industrial. If you need a softer step between them, the midpoint is a warm brown (#773C1B).
See Black and Orange in use
better
Black Tailwind scale (50-900)
Orange Tailwind scale (50-900)
Black to Orange blend
A continuous interpolation from Black to Orange, sampled into the 10 steps below. Tap any swatch to copy its hex.
Why Black and Orange blend best in OKLab
The same two colors blended three ways. This site uses OKLab, which keeps the blend smooth and evenly lit. The other two are shown so you can see what to avoid: sRGB darkens and muddies the middle, and HSL detours through colors that are not in your palette.
Accessibility
Black and Orange can be used together as text and background.
Contrast pairing grid
Rows are Black steps, columns are Orange steps. Each mark is a Black step shown on a Orange step: a check means it clears WCAG AA for text (4.5:1). If you can read the mark, the pairing is legible.
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| 50 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 100 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ | ✓ |
| 200 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ | ✓ |
| 300 | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✓ |
| 400 | ✓ | ✓ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ | ✗ |
| 500 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
| 600 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
| 700 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
| 800 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
| 900 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✗ | ✗ | ✗ |
✓ passes AA ✗ fails AA
Copy for Tailwind
Tailwind v4 — @theme (paste into your CSS)
@theme {
--color-black-50: #EEEEEE;
--color-black-100: #DDDDDD;
--color-black-200: #C1C1C1;
--color-black-300: #9C9C9C;
--color-black-400: #6C6C6C;
--color-black-500: #0A0A0A;
--color-black-600: #060606;
--color-black-700: #030303;
--color-black-800: #010101;
--color-black-900: #000000;
--color-orange-50: #FFF7F3;
--color-orange-100: #FFEFE7;
--color-orange-200: #FFE2D2;
--color-orange-300: #FFCFB6;
--color-orange-400: #FFB58F;
--color-orange-500: #F97316;
--color-orange-600: #CC5D10;
--color-orange-700: #9A4509;
--color-orange-800: #5B2603;
--color-orange-900: #280C01;
}
Tailwind v3 — tailwind.config.js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'black': {
50: '#EEEEEE',
100: '#DDDDDD',
200: '#C1C1C1',
300: '#9C9C9C',
400: '#6C6C6C',
500: '#0A0A0A',
600: '#060606',
700: '#030303',
800: '#010101',
900: '#000000',
},
'orange': {
50: '#FFF7F3',
100: '#FFEFE7',
200: '#FFE2D2',
300: '#FFCFB6',
400: '#FFB58F',
500: '#F97316',
600: '#CC5D10',
700: '#9A4509',
800: '#5B2603',
900: '#280C01',
},
},
},
},
};
CSS variables
:root {
--black-50: #EEEEEE;
--black-100: #DDDDDD;
--black-200: #C1C1C1;
--black-300: #9C9C9C;
--black-400: #6C6C6C;
--black-500: #0A0A0A;
--black-600: #060606;
--black-700: #030303;
--black-800: #010101;
--black-900: #000000;
--orange-50: #FFF7F3;
--orange-100: #FFEFE7;
--orange-200: #FFE2D2;
--orange-300: #FFCFB6;
--orange-400: #FFB58F;
--orange-500: #F97316;
--orange-600: #CC5D10;
--orange-700: #9A4509;
--orange-800: #5B2603;
--orange-900: #280C01;
}SCSS variables
$black-50: #EEEEEE; $black-100: #DDDDDD; $black-200: #C1C1C1; $black-300: #9C9C9C; $black-400: #6C6C6C; $black-500: #0A0A0A; $black-600: #060606; $black-700: #030303; $black-800: #010101; $black-900: #000000; $orange-50: #FFF7F3; $orange-100: #FFEFE7; $orange-200: #FFE2D2; $orange-300: #FFCFB6; $orange-400: #FFB58F; $orange-500: #F97316; $orange-600: #CC5D10; $orange-700: #9A4509; $orange-800: #5B2603; $orange-900: #280C01;
JSON tokens
{
"black": {
"50": "#EEEEEE",
"100": "#DDDDDD",
"200": "#C1C1C1",
"300": "#9C9C9C",
"400": "#6C6C6C",
"500": "#0A0A0A",
"600": "#060606",
"700": "#030303",
"800": "#010101",
"900": "#000000"
},
"orange": {
"50": "#FFF7F3",
"100": "#FFEFE7",
"200": "#FFE2D2",
"300": "#FFCFB6",
"400": "#FFB58F",
"500": "#F97316",
"600": "#CC5D10",
"700": "#9A4509",
"800": "#5B2603",
"900": "#280C01"
}
}How we name colors
There is no single official authority for naming colors. We use the common, widely recognized name as the primary label for each color (here, Black and Orange); many common names are themselves W3C CSS named colors. For transparency we also show the nearest W3C CSS named color and the perceptual distance, ΔE, measured in OKLab. A small ΔE means the name is essentially exact; a larger one means it is the closest standard name rather than a perfect match.
Sources: W3C CSS Color Module Level 4 and the open color-name-list dataset, used to verify every color sits near a recognized name.