Caramel #af6f09
Caramel is the registered name for #af6f09. Below: values, variations, harmonies, contrast and ready-to-paste CSS.
Color values
The same color written in every notation you are likely to need. Click any row to copy it.
What HEX means
#af6f09 packs three channels into hexadecimal pairs from 00 to FF: af red, 6f green, 09 blue.
What RGB means
Red 175, green 111, blue 9 — each from 0 to 255. It is the same color as the hex above, just in decimal.
What HSL means
Hue 37° (orange), saturation 90%, lightness 36%. HSL is handy when you want the same hue a little lighter or less saturated.
Why OKLCH
OKLCH is a perceptual space — changing its lightness (59.7%) matches how your eye reads brightness far better than HSL, which is why the palette below is generated in it.
Accessibility & contrast
WCAG requires at least 4.5:1 for normal text and 3:1 for large text at level AA. Use this to decide whether white or black text belongs on this color.
Closest accessible alternative
Nudged in lightness to reach 4.5:1 while keeping the hue as close as possible.
For white text
#a56600
✓ 4.67:1
UI preview
How this color behaves in a real interface, not just as a square.
A paragraph with a themed link inside it.
Information
An alert accented with this color.
Progress
Color variations
Common transformations of the original color.
Color harmonies
Schemes built by rotating the hue around the color wheel — the starting point for a coherent palette.
Palette generator
A Tailwind-style 50–950 ramp anchored on this color at step 500, generated in OKLCH so the steps feel evenly spaced.
:root {
--primary-50: #fff4de;
--primary-100: #ffe7c7;
--primary-200: #fbd1a3;
--primary-300: #ebb679;
--primary-400: #d09349;
--primary-500: #af6f09;
--primary-600: #945700;
--primary-700: #7a4300;
--primary-800: #643300;
--primary-900: #522800;
--primary-950: #2f1600;
}Gradient
A linear blend from this color to its complement, with the CSS ready to paste.
background: linear-gradient(135deg, #af6f09, #0949ae);
Nearest named colors
The closest matches from a corpus of about 31,900 named colours, ranked by ΔE (CIEDE2000) — a measure of how different two colours look. ΔE under 1 is nearly indistinguishable; around 10 is clearly different.
CSS code
Every common way to use this color in a stylesheet or a component.
color: #af6f09;
background-color: #af6f09;
:root {
--color-primary: #af6f09;
}color: rgb(175 111 9);
color: oklch(59.7% 0.1273 69.4);
<div class="bg-[#af6f09]">…</div>
Use this color in another tool
Carry it straight into the rest of the toolkit.