Benannte Farbe · #243640
Petrol Slumber
Petrol Slumber ist #243640: rgb(36 54 64), hsl(201 28% 20%), oklch(0.322 0.029 233.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Petrol Slumber color name →
#243640
oklch(0.322 0.029 233.2)
Farbumrechnungen
- HEX
- #243640
- RGB
- rgb(36 54 64)
- HSL
- hsl(201 28% 20%)
- HWB
- hwb(201 14% 75%)
- OKLCH
- oklch(0.322 0.029 233.2)
- OKLab
- oklab(0.322 -0.018 -0.024)
- CIE Lab
- lab(21.39 -5.24 -8.73)
- LCH
- lch(21.39 10.18 239)
- CMYK
- cmyk(44% 16% 0% 75%)
Tints · Shades · Tones
Tints
- 374851
- 4B5A63
- 5F6D75
- 748087
- 8A949A
- A0A9AE
- B7BEC1
- CFD3D6
- E7E9EA
Shades
- 1E2E36
- 18252D
- 121E24
- 0C161B
- 070F13
- 04080B
- 020305
- 000101
- 000000
Tones
- 2D3D46
- 35444C
- 3E4B53
- 475259
- 515A5F
- 5A6166
- 63696C
- 6D7073
- 767879
Farbharmonien
Komplementär +180°
- 243640
Petrol Slumber
- 402F25
≈ After Eight
Analog -30° +30°
- 243640
Petrol Slumber
- 21383A
≈ Kōrainando Green
- 2B3343
≈ Dress Blues
Triadisch +120° +240°
- 243640
Petrol Slumber
- 402D34
≈ Chocolate Plum
- 333524
≈ Fuchsia Berries
Geteilt komplementär +150° +210°
- 243640
Petrol Slumber
- 412D2C
≈ Chocolate Plum
- 3B3222
≈ Agrax Earthshade
Tetradisch +90° +180° +270°
- 243640
Petrol Slumber
- 3B2E3C
≈ Valentino Nero
- 402F25
≈ After Eight
- 2A372A
≈ Aimiru Brown
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 12.52:1 · APCA Lc 98
Ag
FailAuf Schwarz
WCAG 1.67:1 · APCA Lc 0
Beste Textfarbe: #FFFFFF
WCAG 12.52:1 (AAA) · APCA Lc 98
Contrast pairs
Code-Snippets
CSS
:root {
--petrol-slumber: #243640;
--petrol-slumber-rgb: 36 54 64;
--petrol-slumber-oklch: oklch(0.322 0.029 233.2);
}
.element {
color: var(--petrol-slumber);
background-color: hsl(201 28% 20%);
border-color: oklch(0.322 0.029 233.2);
}Tailwind CSS v4
@theme {
--color-petrol-slumber: #243640;
--color-petrol-slumber-50: #eef7fc;
--color-petrol-slumber-100: #dfeaf0;
--color-petrol-slumber-200: #c9d7df;
--color-petrol-slumber-300: #aabac5;
--color-petrol-slumber-400: #8ea2ad;
--color-petrol-slumber-500: #738a97;
--color-petrol-slumber-600: #627580;
--color-petrol-slumber-700: #4e5d66;
--color-petrol-slumber-800: #38444b;
--color-petrol-slumber-900: #272f34;
--color-petrol-slumber-950: #151c1f;
}SCSS
$petrol-slumber: #243640;
$petrol-slumber-rgb: 36, 54, 64;
$petrol-slumber-light: mix(#fff, $petrol-slumber, 20%);
$petrol-slumber-dark: mix(#000, $petrol-slumber, 20%);
.element {
color: $petrol-slumber;
box-shadow: 0 0 0 2px rgba($petrol-slumber, 0.35);
}