Named color · #313330
Oil
Oil is #313330: rgb(49 51 48), hsl(100 3% 19%), oklch(0.318 0.006 134.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Oil color name →
#313330
oklch(0.318 0.006 134.9)
Color conversions
- HEX
- #313330
- RGB
- rgb(49 51 48)
- HSL
- hsl(100 3% 19%)
- HWB
- hwb(100 19% 80%)
- OKLCH
- oklch(0.318 0.006 134.9)
- OKLab
- oklab(0.318 -0.004 0.004)
- CIE Lab
- lab(20.96 -1.43 1.59)
- LCH
- lch(20.96 2.14 131.9)
- CMYK
- cmyk(4% 0% 6% 80%)
Tints · Shades · Tones
Tints
- 434542
- 555754
- 696A68
- 7C7E7C
- 919290
- A6A7A6
- BCBCBB
- D2D2D1
- E8E8E8
Shades
- 292B28
- 222321
- 1A1C1A
- 131413
- 0C0D0C
- 060706
- 030303
- 010101
- 000000
Tones
- 383A37
- 40413F
- 474947
- 4F504E
- 575856
- 5F605E
- 676867
- 6F706F
- 787877
Color harmonies
Complementary +180°
- 313330
Oil
- 333134
≈ Stiletto
Analogous -30° +30°
- 313330
Oil
- 33322F
≈ Dryad Bark
- 303331
≈ Oil
Triadic +120° +240°
Split-complementary +150° +210°
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 12.75:1 · APCA Lc 99
Ag
FailOn black
WCAG 1.64:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.75:1 (AAA) · APCA Lc 99
Contrast pairs
Code snippets
CSS
:root {
--oil: #313330;
--oil-rgb: 49 51 48;
--oil-oklch: oklch(0.318 0.006 134.9);
}
.element {
color: var(--oil);
background-color: hsl(100 3% 19%);
border-color: oklch(0.318 0.006 134.9);
}Tailwind CSS v4
@theme {
--color-oil: #313330;
--color-oil-50: #f4f5f4;
--color-oil-100: #e7e8e6;
--color-oil-200: #d3d5d2;
--color-oil-300: #b6b8b5;
--color-oil-400: #9d9f9c;
--color-oil-500: #848783;
--color-oil-600: #70726f;
--color-oil-700: #5a5b59;
--color-oil-800: #414341;
--color-oil-900: #2d2e2d;
--color-oil-950: #1a1b1a;
}SCSS
$oil: #313330;
$oil-rgb: 49, 51, 48;
$oil-light: mix(#fff, $oil, 20%);
$oil-dark: mix(#000, $oil, 20%);
.element {
color: $oil;
box-shadow: 0 0 0 2px rgba($oil, 0.35);
}