Nearest named color · #9DB1A7
#9DB1A7
Nearest named color: Ninja Turtle
#9DB1A7 (rgb(157 177 167), hsl(150 11% 65%), oklch(0.742 0.026 164.2)) is closest to the named color Ninja Turtle. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#9DB1A7
oklch(0.742 0.026 164.2)
Color conversions
- HEX
- #9db1a7
- RGB
- rgb(157 177 167)
- HSL
- hsl(150 11% 65%)
- HWB
- hwb(150 62% 31%)
- OKLCH
- oklch(0.742 0.026 164.2)
- OKLab
- oklab(0.742 -0.025 0.007)
- CIE Lab
- lab(70.43 -8.67 2.66)
- LCH
- lch(70.43 9.07 162.9)
- CMYK
- cmyk(11% 0% 6% 31%)
Tints · Shades · Tones
Tints
- A6B9AF
- B0C0B8
- BAC8C1
- C3D0C9
- CDD7D2
- D7DFDB
- E1E7E4
- EBEFED
- F5F7F6
Shades
- 889991
- 73837B
- 5F6C66
- 4C5752
- 3A423E
- 282F2C
- 181C1A
- 090C0A
- 010101
Tones
- 9AACA3
- 97A79F
- 94A29B
- 919D97
- 8F9893
- 8C938F
- 898E8C
- 868A88
- 838584
Color harmonies
Complementary +180°
- 9DB1A7
Ninja Turtle
- B8A5AF
≈ Foggy Plum
Analogous -30° +30°
- 9DB1A7
Ninja Turtle
- A5AF9F
≈ Tranquil Green
- 99B1B0
≈ Smooth-Hound Shark
Triadic +120° +240°
- 9DB1A7
Ninja Turtle
- A9AABC
≈ Cream Violet
- BBA79E
≈ Heavenly Cocoa
Split-complementary +150° +210°
- 9DB1A7
Ninja Turtle
- B2A7B7
≈ Amorphous Rose
- BCA5A6
≈ Tourmaline Mauve
Tetradic +90° +180° +270°
- 9DB1A7
Ninja Turtle
- A0ADBC
≈ Petrel Blue Grey
- B8A5AF
≈ Foggy Plum
- B6A99A
≈ Flax Fibre Grey
Contrast & accessibility
Ag
FailOn white
WCAG 2.26:1 · APCA Lc 45
Ag
AAAOn black
WCAG 9.28:1 · APCA Lc 57
Best text color: #000000
WCAG 9.28:1 (AAA) · APCA Lc 57
Contrast pairs
Code snippets
CSS
:root {
--ninja-turtle: #9db1a7;
--ninja-turtle-rgb: 157 177 167;
--ninja-turtle-oklch: oklch(0.742 0.026 164.2);
}
.element {
color: var(--ninja-turtle);
background-color: hsl(150 11% 65%);
border-color: oklch(0.742 0.026 164.2);
}Tailwind CSS v4
@theme {
--color-ninja-turtle: #9db1a7;
--color-ninja-turtle-50: #eff8f3;
--color-ninja-turtle-100: #e0ebe6;
--color-ninja-turtle-200: #cad8d2;
--color-ninja-turtle-300: #abbcb4;
--color-ninja-turtle-400: #91a49a;
--color-ninja-turtle-500: #778c82;
--color-ninja-turtle-600: #65766e;
--color-ninja-turtle-700: #505f58;
--color-ninja-turtle-800: #3b4540;
--color-ninja-turtle-900: #28302c;
--color-ninja-turtle-950: #161c19;
}SCSS
$ninja-turtle: #9db1a7;
$ninja-turtle-rgb: 157, 177, 167;
$ninja-turtle-light: mix(#fff, $ninja-turtle, 20%);
$ninja-turtle-dark: mix(#000, $ninja-turtle, 20%);
.element {
color: $ninja-turtle;
box-shadow: 0 0 0 2px rgba($ninja-turtle, 0.35);
}