Benannte Farbe · #54645C
Obligation
Obligation ist #54645C: rgb(84 100 92), hsl(150 9% 36%), oklch(0.487 0.023 163.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Obligation color name →
#54645C
oklch(0.487 0.023 163.8)
Farbumrechnungen
- HEX
- #54645c
- RGB
- rgb(84 100 92)
- HSL
- hsl(150 9% 36%)
- HWB
- hwb(150 33% 61%)
- OKLCH
- oklch(0.487 0.023 163.8)
- OKLab
- oklab(0.487 -0.022 0.006)
- CIE Lab
- lab(40.83 -7.67 2.41)
- LCH
- lch(40.83 8.04 162.6)
- CMYK
- cmyk(16% 0% 8% 61%)
Tints · Shades · Tones
Tints
- 64726B
- 74817A
- 84908A
- 959F9A
- A6AEAA
- B7BEBA
- C9CECB
- DADEDC
- EDEEED
Shades
- 48564F
- 3C4842
- 313B36
- 262E2A
- 1B221F
- 111614
- 080B0A
- 020303
- 000000
Tones
- 586760
- 5D6A63
- 616C67
- 656F6A
- 6A726E
- 6E7571
- 737875
- 777A79
- 7C7D7C
Farbharmonien
Komplementär +180°
- 54645C
Obligation
- 6A5B63
≈ Expressive Plum
Analog -30° +30°
- 54645C
Obligation
- 5A6355
≈ Willow Sooty Bamboo
- 516463
≈ Wellington
Triadisch +120° +240°
- 54645C
Obligation
- 5E5E6D
≈ Mid Grey
- 6C5C55
≈ Sausalito Ridge
Geteilt komplementär +150° +210°
- 54645C
Obligation
- 645C69
≈ Smoky
- 6C5A5C
≈ Falcon
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 6.26:1 · APCA Lc 81
Ag
FailAuf Schwarz
WCAG 3.35:1 · APCA Lc 21
Beste Textfarbe: #FFFFFF
WCAG 6.26:1 (AA) · APCA Lc 81
Contrast pairs
Code-Snippets
CSS
:root {
--obligation: #54645c;
--obligation-rgb: 84 100 92;
--obligation-oklch: oklch(0.487 0.023 163.8);
}
.element {
color: var(--obligation);
background-color: hsl(150 9% 36%);
border-color: oklch(0.487 0.023 163.8);
}Tailwind CSS v4
@theme {
--color-obligation: #54645c;
--color-obligation-50: #eff7f3;
--color-obligation-100: #e1eae6;
--color-obligation-200: #ccd8d2;
--color-obligation-300: #adbbb5;
--color-obligation-400: #93a39b;
--color-obligation-500: #798b82;
--color-obligation-600: #66766e;
--color-obligation-700: #525e58;
--color-obligation-800: #3c4540;
--color-obligation-900: #29302c;
--color-obligation-950: #171c19;
}SCSS
$obligation: #54645c;
$obligation-rgb: 84, 100, 92;
$obligation-light: mix(#fff, $obligation, 20%);
$obligation-dark: mix(#000, $obligation, 20%);
.element {
color: $obligation;
box-shadow: 0 0 0 2px rgba($obligation, 0.35);
}