Named color · #550011
Saving Light
Saving Light is #550011: rgb(85 0 17), hsl(348 100% 17%), oklch(0.285 0.114 19.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Saving Light color name →
#550011
oklch(0.285 0.114 19.3)
Color conversions
- HEX
- #550011
- RGB
- rgb(85 0 17)
- HSL
- hsl(348 100% 17%)
- HWB
- hwb(348 0% 67%)
- OKLCH
- oklch(0.285 0.114 19.3)
- OKLab
- oklab(0.285 0.108 0.038)
- CIE Lab
- lab(15.77 36.72 17.25)
- LCH
- lch(15.77 40.57 25.2)
- CMYK
- cmyk(0% 100% 80% 67%)
Tints · Shades · Tones
Tints
- 672025
- 79383B
- 8B5050
- 9C6767
- AD7F7F
- BE9897
- CEB1B0
- DFCACA
- EFE4E4
Shades
- 49000D
- 3D0009
- 310006
- 260004
- 1C0002
- 110001
- 080000
- 020000
- 000000
Tones
- 5B131C
- 612226
- 662F31
- 6B3B3B
- 6F4646
- 745251
- 775D5D
- 7B6968
- 7E7474
Color harmonies
Complementary +180°
- 550011
Saving Light
- 003133
≈ Roof Tile Green
Analogous -30° +30°
- 550011
Saving Light
- 4F0332
≈ Pion Purple
- 461C00
≈ Bath in Chocolate
Triadic +120° +240°
- 550011
Saving Light
- 0C3400
≈ Witch Wart
- 002560
≈ Black Sea Night
Split-complementary +150° +210°
- 550011
Saving Light
- 003325
≈ Pitch-Black Forests
- 002F40
≈ Nordic Noir
Tetradic +90° +180° +270°
- 550011
Saving Light
- 2C2C00
≈ Secret Passage
- 003133
≈ Roof Tile Green
- 2B195D
≈ Night Fog
Contrast & accessibility
Ag
AAAOn white
WCAG 15.06:1 · APCA Lc 100
Ag
FailOn black
WCAG 1.39:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 15.06:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--saving-light: #550011;
--saving-light-rgb: 85 0 17;
--saving-light-oklch: oklch(0.285 0.114 19.3);
}
.element {
color: var(--saving-light);
background-color: hsl(348 100% 17%);
border-color: oklch(0.285 0.114 19.3);
}Tailwind CSS v4
@theme {
--color-saving-light: #550011;
--color-saving-light-50: #ffe9e7;
--color-saving-light-100: #ffdad7;
--color-saving-light-200: #ffc2bf;
--color-saving-light-300: #eca09e;
--color-saving-light-400: #da8283;
--color-saving-light-500: #c66467;
--color-saving-light-600: #a85558;
--color-saving-light-700: #874446;
--color-saving-light-800: #643034;
--color-saving-light-900: #462123;
--color-saving-light-950: #2d1012;
}SCSS
$saving-light: #550011;
$saving-light-rgb: 85, 0, 17;
$saving-light-light: mix(#fff, $saving-light, 20%);
$saving-light-dark: mix(#000, $saving-light, 20%);
.element {
color: $saving-light;
box-shadow: 0 0 0 2px rgba($saving-light, 0.35);
}