Named color · #7F6C6E
Twisted Time
Twisted Time is #7F6C6E: rgb(127 108 110), hsl(354 8% 46%), oklch(0.55 0.024 10.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Twisted Time color name →
#7F6C6E
oklch(0.55 0.024 10.7)
Color conversions
- HEX
- #7f6c6e
- RGB
- rgb(127 108 110)
- HSL
- hsl(354 8% 46%)
- HWB
- hwb(354 42% 50%)
- OKLCH
- oklch(0.55 0.024 10.7)
- OKLab
- oklab(0.55 0.024 0.005)
- CIE Lab
- lab(47.52 8.01 1.81)
- LCH
- lch(47.52 8.21 12.7)
- CMYK
- cmyk(0% 15% 13% 50%)
Tints · Shades · Tones
Tints
- 8B7A7B
- 978889
- A49697
- B1A4A5
- BDB3B4
- CAC2C2
- D7D1D1
- E4E0E0
- F2EFF0
Shades
- 6E5D5F
- 5D4E50
- 4C4041
- 3C3233
- 2D2526
- 1F1919
- 110D0E
- 060404
- 010001
Tones
- 7F6E70
- 7F7072
- 7F7273
- 807475
- 807677
- 807879
- 807A7B
- 807C7C
- 807E7E
Color harmonies
Complementary +180°
- 7F6C6E
Twisted Time
- 627675
≈ Becker Blue
Analogous -30° +30°
- 7F6C6E
Twisted Time
- 7C6C76
≈ Purple Dusk
- 7F6D67
≈ African Mud
Triadic +120° +240°
- 7F6C6E
Twisted Time
- 6D7566
≈ Evergreen Trail
- 677380
≈ Wharf View
Split-complementary +150° +210°
- 7F6C6E
Twisted Time
- 66766D
≈ Sirocco
- 63757C
≈ Sea Beast
Tetradic +90° +180° +270°
- 7F6C6E
Twisted Time
- 747262
≈ Organic
- 627675
≈ Becker Blue
- 6F7080
≈ Old Mill Blue
Contrast & accessibility
Ag
AAOn white
WCAG 4.91:1 · APCA Lc 74
Ag
FailOn black
WCAG 4.27:1 · APCA Lc 28
Best text color: #FFFFFF
WCAG 4.91:1 (AA) · APCA Lc 74
Contrast pairs
Code snippets
CSS
:root {
--twisted-time: #7f6c6e;
--twisted-time-rgb: 127 108 110;
--twisted-time-oklch: oklch(0.55 0.024 10.7);
}
.element {
color: var(--twisted-time);
background-color: hsl(354 8% 46%);
border-color: oklch(0.55 0.024 10.7);
}Tailwind CSS v4
@theme {
--color-twisted-time: #7f6c6e;
--color-twisted-time-50: #fcf2f3;
--color-twisted-time-100: #f0e5e5;
--color-twisted-time-200: #ded0d1;
--color-twisted-time-300: #c3b3b4;
--color-twisted-time-400: #ac999b;
--color-twisted-time-500: #958082;
--color-twisted-time-600: #7e6c6e;
--color-twisted-time-700: #655758;
--color-twisted-time-800: #4a3f41;
--color-twisted-time-900: #342b2c;
--color-twisted-time-950: #1f191a;
}SCSS
$twisted-time: #7f6c6e;
$twisted-time-rgb: 127, 108, 110;
$twisted-time-light: mix(#fff, $twisted-time, 20%);
$twisted-time-dark: mix(#000, $twisted-time, 20%);
.element {
color: $twisted-time;
box-shadow: 0 0 0 2px rgba($twisted-time, 0.35);
}