Color spaces
Base numbers
Binary
Octal
Decimal
Hex
Usage highlights
Interactive tools
Build palettes and validate contrast on the fly
Drop favorite swatches into a custom stack, then test new text/background combos without leaving the page.
Derived palettes
Shades, tints and harmonies
Generate system-ready palettes directly from the source swatch. Each tone carries HEX and contextual tags.
Shades
Depth controlTints
UI backgroundsTriadic
Balanced accentsAnalogous
Gradient-readyComplementary
Contrast anchorMonochromatic
Data vizCode snippets
Drop into CSS, Tailwind or design tokens
Component tokens
:root {
--color-hex-1d0806: #1D0806;
}
.btn-color {
background: var(--color-hex-1d0806);
color: #f8fafc;
box-shadow: 0 10px 25px rgba(29, 8, 6, 0.25);
}
Design token extend
module.exports = {
theme: {
extend: {
colors: {
hex1d0806: '#1D0806',
hex1d0806Tint: '#42312F',
},
},
},
};
Shadow presets
.text-color-1d0806 {
color: #1D0806;
text-shadow: 4px 4px 2px rgba(29, 8, 6, 0.8);
}
.panel-color-1d0806 {
border: 3px solid #1D0806;
box-shadow: 1px 1px 3px 2px #1D0806;
}
Accessibility lab
See the swatch on contrasting surfaces
Compare how #1D0806 behaves in light dashboards, dark terminals and mixed layouts. Ratios are based on WCAG 2.1 calculations at 100% opacity.
Mission control confirms calm seas.
- Usage: body copy, data labels.
- Background: #e6eaeb shell.
- Min size: 16px regular, 14px bold.
Vector shields aligned. Engage warp.
- Usage: hero headings, CTA outlines.
- Background: #0f172a cockpit.
- Min size: 12px icons, 18px type.
Pairing matrix
| Background | #1D0806 text | #f8fafc text |
|---|---|---|
| #e6eaeb | AA | N/A |
| #0f172a | AAA | AA |
| #050505 | AAA | AA |
Swap to #f97316 text on dark shells to push CTA contrast to 9.4:1.
Recommended supporting neutrals: