Named color · #0F1012
Ruined Smores
Ruined Smores is #0F1012: rgb(15 16 18), hsl(220 9% 6%), oklch(0.173 0.004 264.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Ruined Smores color name →
#0F1012
oklch(0.173 0.004 264.5)
Color conversions
- HEX
- #0f1012
- RGB
- rgb(15 16 18)
- HSL
- hsl(220 9% 6%)
- HWB
- hwb(220 6% 93%)
- OKLCH
- oklch(0.173 0.004 264.5)
- OKLab
- oklab(0.173 0 -0.004)
- CIE Lab
- lab(4.65 -0.07 -1.22)
- LCH
- lch(4.65 1.22 266.9)
- CMYK
- cmyk(17% 11% 0% 93%)
Tints · Shades · Tones
Tints
- 222325
- 363739
- 4C4D4F
- 636466
- 7B7C7D
- 949596
- AEAEAF
- C8C9C9
- E3E3E4
Shades
- 0B0C0E
- 08090A
- 050607
- 030404
- 020202
- 010101
- 000001
- 000000
- 000000
Tones
- 191A1B
- 232425
- 2D2E30
- 38393A
- 434445
- 4F4F50
- 5B5B5C
- 676768
- 737374
Color harmonies
Complementary +180°
- 0F1012
Ruined Smores
- 11100E
≈ Sinister
Analogous -30° +30°
- 0F1012
Ruined Smores
- 0E1012
≈ Ruined Smores
- 101012
≈ Ruined Smores
Triadic +120° +240°
- 0F1012
Ruined Smores
- 120F0F
≈ Chaos Black
- 0F110F
≈ Dreamless Sleep
Split-complementary +150° +210°
- 0F1012
Ruined Smores
- 12100E
≈ Sinister
- 10100E
≈ Chaos Black
Tetradic +90° +180° +270°
- 0F1012
Ruined Smores
- 120F10
≈ Chaos Black
- 11100E
≈ Sinister
- 0E1110
≈ Dreamless Sleep
Contrast & accessibility
Ag
AAAOn white
WCAG 19.03:1 · APCA Lc 105
Ag
FailOn black
WCAG 1.10:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 19.03:1 (AAA) · APCA Lc 105
Contrast pairs
Code snippets
CSS
:root {
--ruined-smores: #0f1012;
--ruined-smores-rgb: 15 16 18;
--ruined-smores-oklch: oklch(0.173 0.004 264.5);
}
.element {
color: var(--ruined-smores);
background-color: hsl(220 9% 6%);
border-color: oklch(0.173 0.004 264.5);
}Tailwind CSS v4
@theme {
--color-ruined-smores: #0f1012;
--color-ruined-smores-50: #f4f5f6;
--color-ruined-smores-100: #e7e8e9;
--color-ruined-smores-200: #d3d4d6;
--color-ruined-smores-300: #b6b7ba;
--color-ruined-smores-400: #9d9ea1;
--color-ruined-smores-500: #858689;
--color-ruined-smores-600: #707174;
--color-ruined-smores-700: #5a5b5d;
--color-ruined-smores-800: #414244;
--color-ruined-smores-900: #2d2e2f;
--color-ruined-smores-950: #1a1b1b;
}SCSS
$ruined-smores: #0f1012;
$ruined-smores-rgb: 15, 16, 18;
$ruined-smores-light: mix(#fff, $ruined-smores, 20%);
$ruined-smores-dark: mix(#000, $ruined-smores, 20%);
.element {
color: $ruined-smores;
box-shadow: 0 0 0 2px rgba($ruined-smores, 0.35);
}