Nazwany kolor · #243640
Petrol Slumber
Petrol Slumber to #243640: rgb(36 54 64), hsl(201 28% 20%), oklch(0.322 0.029 233.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Petrol Slumber color name →
#243640
oklch(0.322 0.029 233.2)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 374851
- 4B5A63
- 5F6D75
- 748087
- 8A949A
- A0A9AE
- B7BEC1
- CFD3D6
- E7E9EA
Odcienie ciemniejsze
- 1E2E36
- 18252D
- 121E24
- 0C161B
- 070F13
- 04080B
- 020305
- 000101
- 000000
Tony
- 2D3D46
- 35444C
- 3E4B53
- 475259
- 515A5F
- 5A6166
- 63696C
- 6D7073
- 767879
Harmonie kolorów
Komplementarna +180°
- 243640
Petrol Slumber
- 402F25
≈ After Eight
Analogowa -30° +30°
- 243640
Petrol Slumber
- 21383A
≈ Kōrainando Green
- 2B3343
≈ Dress Blues
Triada +120° +240°
- 243640
Petrol Slumber
- 402D34
≈ Chocolate Plum
- 333524
≈ Fuchsia Berries
Komplementarna rozszczepiona +150° +210°
- 243640
Petrol Slumber
- 412D2C
≈ Chocolate Plum
- 3B3222
≈ Agrax Earthshade
Tetrada +90° +180° +270°
- 243640
Petrol Slumber
- 3B2E3C
≈ Valentino Nero
- 402F25
≈ After Eight
- 2A372A
≈ Aimiru Brown
Kontrast i dostępność
Ag
AAANa bieli
WCAG 12.52:1 · APCA Lc 98
Ag
FailNa czerni
WCAG 1.67:1 · APCA Lc 0
Najlepszy kolor tekstu: #FFFFFF
WCAG 12.52:1 (AAA) · APCA Lc 98
Contrast pairs
Fragmenty kodu
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);
}