Benannte Farbe · #2F4E4E
Similar to Slate
Similar to Slate ist #2F4E4E: rgb(47 78 78), hsl(180 25% 25%), oklch(0.4 0.037 195.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Teal mean? → · Similar to Slate color name →
#2F4E4E
oklch(0.4 0.037 195.8)
Farbumrechnungen
- HEX
- #2f4e4e
- RGB
- rgb(47 78 78)
- HSL
- hsl(180 25% 25%)
- HWB
- hwb(180 18% 69%)
- OKLCH
- oklch(0.4 0.037 195.8)
- OKLab
- oklab(0.4 -0.035 -0.01)
- CIE Lab
- lab(30.77 -11.94 -3.84)
- LCH
- lch(30.77 12.54 197.8)
- CMYK
- cmyk(40% 0% 0% 69%)
Tints · Shades · Tones
Tints
- 425E5E
- 556E6E
- 697F7F
- 7D9190
- 92A2A2
- A7B4B4
- BCC6C6
- D2D9D9
- E8ECEC
Shades
- 274343
- 203838
- 192D2D
- 122323
- 0C1919
- 060F0F
- 030707
- 010202
- 000000
Tones
- 375353
- 3F5858
- 485D5D
- 506262
- 586766
- 606C6C
- 687171
- 707676
- 787B7B
Farbharmonien
Komplementär +180°
- 2F4E4E
Similar to Slate
- 5A4041
≈ Wood-Black Red
Analog -30° +30°
- 2F4E4E
Similar to Slate
- 344E43
≈ Pine Needle
- 324C57
≈ Seaworthy
Triadisch +120° +240°
- 2F4E4E
Similar to Slate
- 4F4255
≈ Blackberry Harvest
- 534531
≈ Old Treasure Chest
Geteilt komplementär +150° +210°
- 2F4E4E
Similar to Slate
- 57404C
≈ Punchit Purple
- 594237
≈ Lava Cake
Tetradisch +90° +180° +270°
- 2F4E4E
Similar to Slate
- 46455B
≈ Darkest Navy
- 5A4041
≈ Wood-Black Red
- 4A4932
≈ Tinny Tin
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 9.04:1 · APCA Lc 91
Ag
FailAuf Schwarz
WCAG 2.32:1 · APCA Lc 12
Beste Textfarbe: #FFFFFF
WCAG 9.04:1 (AAA) · APCA Lc 91
Contrast pairs
Code-Snippets
CSS
:root {
--similar-to-slate: #2f4e4e;
--similar-to-slate-rgb: 47 78 78;
--similar-to-slate-oklch: oklch(0.4 0.037 195.8);
}
.element {
color: var(--similar-to-slate);
background-color: hsl(180 25% 25%);
border-color: oklch(0.4 0.037 195.8);
}Tailwind CSS v4
@theme {
--color-similar-to-slate: #2f4e4e;
--color-similar-to-slate-50: #eaf9f9;
--color-similar-to-slate-100: #dbecec;
--color-similar-to-slate-200: #c3d9da;
--color-similar-to-slate-300: #a3bebe;
--color-similar-to-slate-400: #86a6a5;
--color-similar-to-slate-500: #6a8e8e;
--color-similar-to-slate-600: #5a7878;
--color-similar-to-slate-700: #486060;
--color-similar-to-slate-800: #344746;
--color-similar-to-slate-900: #233130;
--color-similar-to-slate-950: #121d1d;
}SCSS
$similar-to-slate: #2f4e4e;
$similar-to-slate-rgb: 47, 78, 78;
$similar-to-slate-light: mix(#fff, $similar-to-slate, 20%);
$similar-to-slate-dark: mix(#000, $similar-to-slate, 20%);
.element {
color: $similar-to-slate;
box-shadow: 0 0 0 2px rgba($similar-to-slate, 0.35);
}