Nazwany kolor · #20887A
Palm Springs Splash
Palm Springs Splash to #20887A: rgb(32 136 122), hsl(172 62% 33%), oklch(0.566 0.093 181.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Palm Springs Splash color name →
#20887A
oklch(0.566 0.093 181.6)
Konwersje koloru
- HEX
- #20887a
- RGB
- rgb(32 136 122)
- HSL
- hsl(172 62% 33%)
- HWB
- hwb(172 13% 47%)
- OKLCH
- oklch(0.566 0.093 181.6)
- OKLab
- oklab(0.566 -0.093 -0.003)
- CIE Lab
- lab(50.86 -32.51 -1.22)
- LCH
- lch(50.86 32.53 182.1)
- CMYK
- cmyk(76% 0% 10% 47%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 409486
- 589F93
- 6EABA0
- 83B7AD
- 98C3BA
- ADCFC8
- C1DBD5
- D6E7E3
- EAF3F1
Odcienie ciemniejsze
- 1A7569
- 156359
- 0F5249
- 0A413A
- 06312B
- 03221D
- 011310
- 000605
- 000101
Tony
- 32877B
- 3F877B
- 4A867C
- 53857C
- 5C857D
- 64847E
- 6C837E
- 73827F
- 79817F
Harmonie kolorów
Komplementarna +180°
- 20887A
Palm Springs Splash
- A35E72
≈ Cosmetic Red
Analogowa -30° +30°
- 20887A
Palm Springs Splash
- 49865A
≈ Onion Seedling
- 188596
≈ Painted Sea
Triada +120° +240°
- 20887A
Palm Springs Splash
- 8069A4
≈ Wintertime Mauve
- 9E6939
≈ Hot Ginger
Komplementarna rozszczepiona +150° +210°
- 20887A
Palm Springs Splash
- 96618F
≈ Plum Savour
- A66153
≈ Roycroft Adobe
Tetrada +90° +180° +270°
- 20887A
Palm Springs Splash
- 6373AD
≈ King’s Robe
- A35E72
≈ Cosmetic Red
- 8A742E
≈ Aubergine Green
Kontrast i dostępność
Ag
FailNa bieli
WCAG 4.31:1 · APCA Lc 70
Ag
AANa czerni
WCAG 4.86:1 · APCA Lc 32
Najlepszy kolor tekstu: #000000
WCAG 4.86:1 (AA) · APCA Lc 32
Contrast pairs
Fragmenty kodu
CSS
:root {
--palm-springs-splash: #20887a;
--palm-springs-splash-rgb: 32 136 122;
--palm-springs-splash-oklch: oklch(0.566 0.093 181.6);
}
.element {
color: var(--palm-springs-splash);
background-color: hsl(172 62% 33%);
border-color: oklch(0.566 0.093 181.6);
}Tailwind CSS v4
@theme {
--color-palm-springs-splash: #20887a;
--color-palm-springs-splash-50: #d9fef8;
--color-palm-springs-splash-100: #c6f3eb;
--color-palm-springs-splash-200: #a8e2d8;
--color-palm-springs-splash-300: #7fc7bc;
--color-palm-springs-splash-400: #58b1a2;
--color-palm-springs-splash-500: #249a8a;
--color-palm-springs-splash-600: #228275;
--color-palm-springs-splash-700: #1c685e;
--color-palm-springs-splash-800: #134d43;
--color-palm-springs-splash-900: #0c352e;
--color-palm-springs-splash-950: #00201b;
}SCSS
$palm-springs-splash: #20887a;
$palm-springs-splash-rgb: 32, 136, 122;
$palm-springs-splash-light: mix(#fff, $palm-springs-splash, 20%);
$palm-springs-splash-dark: mix(#000, $palm-springs-splash, 20%);
.element {
color: $palm-springs-splash;
box-shadow: 0 0 0 2px rgba($palm-springs-splash, 0.35);
}