Nächste benannte Farbe · #6B6C6D
#6B6C6D
Nächste benannte Farbe: Beautiful Darkness
#6B6C6D (rgb(107 108 109), hsl(210 1% 42%), oklch(0.531 0.002 247.9)) liegt am nächsten an der benannten Farbe Beautiful Darkness. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#6B6C6D
oklch(0.531 0.002 247.9)
Farbumrechnungen
- HEX
- #6b6c6d
- RGB
- rgb(107 108 109)
- HSL
- hsl(210 1% 42%)
- HWB
- hwb(210 42% 57%)
- OKLCH
- oklch(0.531 0.002 247.9)
- OKLab
- oklab(0.531 -0.001 -0.002)
- CIE Lab
- lab(45.56 -0.24 -0.7)
- LCH
- lch(45.56 0.74 250.8)
- CMYK
- cmyk(2% 1% 0% 57%)
Tints · Shades · Tones
Tints
- 797A7B
- 878788
- 959696
- A3A4A5
- B2B3B3
- C1C2C2
- D0D1D1
- E0E0E0
- EFEFEF
Shades
- 5C5D5E
- 4E4E4F
- 3F4041
- 323233
- 252526
- 181919
- 0D0D0D
- 040404
- 000001
Tones
- 6D6E6F
- 6F7071
- 717273
- 737475
- 757676
- 787878
- 7A7A7A
- 7C7C7C
- 7E7E7E
Farbharmonien
Komplementär +180°
- 6B6C6D
Beautiful Darkness
- 6D6C6B
≈ Dove Grey
Analog -30° +30°
- 6B6C6D
Beautiful Darkness
- 6B6C6D
≈ Dark Ash
- 6C6C6D
≈ Dove Grey
Triadisch +120° +240°
- 6B6C6D
Beautiful Darkness
- 6D6B6C
≈ Dove Grey
- 6C6C6B
≈ Dove Grey
Geteilt komplementär +150° +210°
- 6B6C6D
Beautiful Darkness
- 6D6C6B
≈ Dove Grey
- 6C6C6B
≈ Dove Grey
Tetradisch +90° +180° +270°
- 6B6C6D
Beautiful Darkness
- 6D6B6C
≈ Dove Grey
- 6D6C6B
≈ Dove Grey
- 6B6C6B
≈ Boat Anchor
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.26:1 · APCA Lc 76
Ag
FailAuf Schwarz
WCAG 3.99:1 · APCA Lc 26
Beste Textfarbe: #FFFFFF
WCAG 5.26:1 (AA) · APCA Lc 76
Contrast pairs
Code-Snippets
CSS
:root {
--beautiful-darkness: #6b6c6d;
--beautiful-darkness-rgb: 107 108 109;
--beautiful-darkness-oklch: oklch(0.531 0.002 247.9);
}
.element {
color: var(--beautiful-darkness);
background-color: hsl(210 1% 42%);
border-color: oklch(0.531 0.002 247.9);
}Tailwind CSS v4
@theme {
--color-beautiful-darkness: #6b6c6d;
--color-beautiful-darkness-50: #f5f5f6;
--color-beautiful-darkness-100: #e7e8e8;
--color-beautiful-darkness-200: #d3d4d5;
--color-beautiful-darkness-300: #b6b7b8;
--color-beautiful-darkness-400: #9d9e9f;
--color-beautiful-darkness-500: #858687;
--color-beautiful-darkness-600: #717273;
--color-beautiful-darkness-700: #5a5b5c;
--color-beautiful-darkness-800: #424243;
--color-beautiful-darkness-900: #2d2e2e;
--color-beautiful-darkness-950: #1a1b1b;
}SCSS
$beautiful-darkness: #6b6c6d;
$beautiful-darkness-rgb: 107, 108, 109;
$beautiful-darkness-light: mix(#fff, $beautiful-darkness, 20%);
$beautiful-darkness-dark: mix(#000, $beautiful-darkness, 20%);
.element {
color: $beautiful-darkness;
box-shadow: 0 0 0 2px rgba($beautiful-darkness, 0.35);
}