Nazwany kolor · #486358
Pine Haven
Pine Haven to #486358: rgb(72 99 88), hsl(156 16% 34%), oklch(0.475 0.037 167.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Green mean? → · Pine Haven color name →
#486358
oklch(0.475 0.037 167.8)
Konwersje koloru
- HEX
- #486358
- RGB
- rgb(72 99 88)
- HSL
- hsl(156 16% 34%)
- HWB
- hwb(156 28% 61%)
- OKLCH
- oklch(0.475 0.037 167.8)
- OKLab
- oklab(0.475 -0.036 0.008)
- CIE Lab
- lab(39.54 -12.38 2.86)
- LCH
- lch(39.54 12.7 167)
- CMYK
- cmyk(27% 0% 11% 61%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 597167
- 6A8077
- 7C8F87
- 8D9E97
- A0AEA8
- B2BEB9
- C5CECA
- D8DEDB
- EBEEED
Odcienie ciemniejsze
- 3D554B
- 33473F
- 293A33
- 1F2E28
- 16211D
- 0D1612
- 060B09
- 020303
- 000000
Tony
- 4E665C
- 536960
- 596C64
- 5F6F68
- 64716C
- 6A7470
- 6F7774
- 757A78
- 7A7D7C
Harmonie kolorów
Komplementarna +180°
- 486358
Pine Haven
- 6C5460
≈ Mocha Brown
Analogowa -30° +30°
- 486358
Pine Haven
- 52614D
≈ Whispering Oaks
- 436363
≈ Brochantite Green
Triada +120° +240°
- 486358
Pine Haven
- 5B5970
≈ Orchid Grey
- 6E564A
≈ Caramelised Walnut
Komplementarna rozszczepiona +150° +210°
- 486358
Pine Haven
- 65566A
≈ Darkest Grape
- 6F5454
≈ Grand Plum
Tetrada +90° +180° +270°
- 486358
Pine Haven
- 4F5D71
≈ Vintage Indigo
- 6C5460
≈ Mocha Brown
- 685A45
≈ Cummings Oak
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.56:1 · APCA Lc 82
Ag
FailNa czerni
WCAG 3.20:1 · APCA Lc 19
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.56:1 (AA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--pine-haven: #486358;
--pine-haven-rgb: 72 99 88;
--pine-haven-oklch: oklch(0.475 0.037 167.8);
}
.element {
color: var(--pine-haven);
background-color: hsl(156 16% 34%);
border-color: oklch(0.475 0.037 167.8);
}Tailwind CSS v4
@theme {
--color-pine-haven: #486358;
--color-pine-haven-50: #ecf9f3;
--color-pine-haven-100: #ddece6;
--color-pine-haven-200: #c6dad2;
--color-pine-haven-300: #a6beb4;
--color-pine-haven-400: #8aa69a;
--color-pine-haven-500: #6f8e81;
--color-pine-haven-600: #5e786e;
--color-pine-haven-700: #4b6058;
--color-pine-haven-800: #37473f;
--color-pine-haven-900: #25312c;
--color-pine-haven-950: #141d19;
}SCSS
$pine-haven: #486358;
$pine-haven-rgb: 72, 99, 88;
$pine-haven-light: mix(#fff, $pine-haven, 20%);
$pine-haven-dark: mix(#000, $pine-haven, 20%);
.element {
color: $pine-haven;
box-shadow: 0 0 0 2px rgba($pine-haven, 0.35);
}