#D7D8D7 · #8C8E8E · #4B4E4F · #101314
Use #D7D8D7 as the background. Use #8C8E8E as the primary accent. Use #4B4E4F as secondary. Use #101314 as body text/supporting color. Palette mood: Hot-Rolled Steel — mono, cool, moody, earthy, night.
Technical breakdown for the Hot-Rolled Steel color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 68.5% | 215, 216, 215 | 0%, 0%, 0%, 15% | 120°, 1%, 85% | ||
| Primary Accent Luminance: 26.9% | 140, 142, 142 | 1%, 0%, 0%, 44% | 180°, 1%, 55% | ||
| Secondary Luminance: 7.5% | 75, 78, 79 | 5%, 1%, 0%, 69% | 195°, 3%, 30% | ||
| Body Text Luminance: 0.6% | 16, 19, 20 | 20%, 5%, 0%, 92% | 195°, 11%, 7% |
Hover states, borders and elevation need lighter and darker steps of your base colors. Here are computed tints and shades for every color in the Hot-Rolled Steel palette — click any swatch to copy its hex.
Every color tested as text on every other color as background. Body copy needs 4.5:1 (AA), large text and UI components 3:1. AAA requires 7:1.
| Text on Background | Preview | Ratio | Grade | Safe For |
|---|---|---|---|---|
| #101314 on #D7D8D7 |
Aa Sample Text
| 13.06:1 | AAA | Body text, headings, UI |
| #D7D8D7 on #101314 |
Aa Sample Text
| 13.06:1 | AAA | Body text, headings, UI |
| #4B4E4F on #D7D8D7 |
Aa Sample Text
| 5.87:1 | AA | Body text, UI |
| #D7D8D7 on #4B4E4F |
Aa Sample Text
| 5.87:1 | AA | Body text, UI |
| #101314 on #8C8E8E |
Aa Sample Text
| 5.67:1 | AA | Body text, UI |
| #8C8E8E on #101314 |
Aa Sample Text
| 5.67:1 | AA | Body text, UI |
| #4B4E4F on #8C8E8E |
Aa Sample Text
| 2.55:1 | Fail | Decorative use only |
| #8C8E8E on #4B4E4F |
Aa Sample Text
| 2.55:1 | Fail | Decorative use only |
| #8C8E8E on #D7D8D7 |
Aa Sample Text
| 2.30:1 | Fail | Decorative use only |
| #D7D8D7 on #8C8E8E |
Aa Sample Text
| 2.30:1 | Fail | Decorative use only |
| #101314 on #4B4E4F |
Aa Sample Text
| 2.22:1 | Fail | Decorative use only |
| #4B4E4F on #101314 |
Aa Sample Text
| 2.22:1 | Fail | Decorative use only |
The Hot-Rolled Steel palette is built using a custom relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
A custom palette is often preferred by professional designers because it balances visual interest with cohesion.
Need a fifth color? These three companions are computed from the palette's own hue positions on the color wheel, so they extend the scheme without breaking its harmony.
directly opposite #8C8E8E on the wheel — the strongest accent for CTAs and highlights when you need maximum energy
30° beside #8C8E8E — a calm secondary that extends the palette without adding tension
a ink-black carrying the palette's own hue — perfect for surfaces and dividers
To use this Hot-Rolled Steel color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Use #D7D8D7 for the main background and #8C8E8E for primary buttons. This creates a high-contrast focal point.
The contrast ratio between #101314 and #D7D8D7 is 13.06:1 (AAA). Ensure your body text remains legible.
The Hot-Rolled Steel palette contains #D7D8D7, #8C8E8E, #4B4E4F, #101314. Click any swatch on this page to copy its value, or export all four at once as CSS variables, Tailwind config, SCSS or a Figma-ready list.
Yes for its strongest pairings: #101314 on #D7D8D7 reaches 13.1:1 (AAA). For body text always keep a 4.5:1 ratio and for large UI elements 3:1 — the full contrast matrix above shows the exact score for every color-on-color combination in this palette.
Beyond its own four colors, #8D8B8B, #818C98, #141514 extend it naturally: the complementary hue for high-energy accents, an analogous neighbor for calm transitions, and a tinted neutral for surfaces. All three are computed from this palette's hues on the color wheel.
Hot-Rolled Steel reads as mono, cool, moody. Neutral gray drives the personality, grounded by neutral gray — a combination that works best when the very light base gets most of the canvas.
Yes. Individual color values can't be copyrighted, so the Hot-Rolled Steel palette is free for personal, client and commercial work — websites, branding, apps, print and social content, with no attribution required.
Use the export panel on this page: CSS variables, a Tailwind config block, SCSS variables, or a Figma copy list are generated from Hot-Rolled Steel's exact values, including the tint and shade ramps shown above.