Couleur nommée · #9BC2BD
Pitter Patter
Pitter Patter correspond à #9BC2BD : rgb(155 194 189), hsl(172 24% 68%), oklch(0.784 0.042 186.7). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Teal mean? → · Pitter Patter color name →
#9BC2BD
oklch(0.784 0.042 186.7)
Conversions de couleur
- HEX
- #9bc2bd
- RGB
- rgb(155 194 189)
- HSL
- hsl(172 24% 68%)
- HWB
- hwb(172 61% 24%)
- OKLCH
- oklch(0.784 0.042 186.7)
- OKLab
- oklab(0.784 -0.042 -0.005)
- CIE Lab
- lab(75.48 -14.26 -2)
- LCH
- lch(75.48 14.4 188)
- CMYK
- cmyk(20% 0% 3% 24%)
Teintes · Ombres · Tons
Teintes
- A5C8C3
- AFCECA
- B9D4D0
- C3DAD7
- CDE0DE
- D7E6E4
- E1ECEB
- EBF3F2
- F5F9F8
Ombres
- 86A8A4
- 728F8C
- 5E7774
- 4B605D
- 394947
- 283433
- 18201F
- 090E0D
- 010202
Tons
- 99BBB7
- 96B4B0
- 93AEAA
- 91A7A4
- 8EA09E
- 8B9A98
- 899392
- 868D8C
- 838686
Harmonies de couleurs
Complémentaire +180°
- 9BC2BD
Pitter Patter
- D2AEB4
≈ Strawberry Latte
Analogue -30° +30°
- 9BC2BD
Pitter Patter
- A4C1AE
≈ Cambridge Blue
- 9BC0CA
≈ Rest Assured
Triadique +120° +240°
- 9BC2BD
Pitter Patter
- C0B2CF
≈ Frosted Orchid
- CCB49D
≈ Warm Alpaca
Complémentaire divisée +150° +210°
- 9BC2BD
Pitter Patter
- CBAFC3
≈ Winsome Orchid
- D2B0A6
≈ Damask Dunes
Tétradique +90° +180° +270°
- 9BC2BD
Pitter Patter
- B1B7D4
≈ Hundred Waters
- D2AEB4
≈ Strawberry Latte
- C0B99B
≈ Good to Grow
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.93:1 · APCA Lc 37
Ag
AAASur noir
WCAG 10.84:1 · APCA Lc 65
Meilleure couleur de texte: #000000
WCAG 10.84:1 (AAA) · APCA Lc 65
Contrast pairs
Extraits de code
CSS
:root {
--pitter-patter: #9bc2bd;
--pitter-patter-rgb: 155 194 189;
--pitter-patter-oklch: oklch(0.784 0.042 186.7);
}
.element {
color: var(--pitter-patter);
background-color: hsl(172 24% 68%);
border-color: oklch(0.784 0.042 186.7);
}Tailwind CSS v4
@theme {
--color-pitter-patter: #9bc2bd;
--color-pitter-patter-50: #e8f9f7;
--color-pitter-patter-100: #d9edeb;
--color-pitter-patter-200: #c1dad8;
--color-pitter-patter-300: #a0bfbc;
--color-pitter-patter-400: #83a7a2;
--color-pitter-patter-500: #66908b;
--color-pitter-patter-600: #577975;
--color-pitter-patter-700: #45615e;
--color-pitter-patter-800: #324744;
--color-pitter-patter-900: #22312f;
--color-pitter-patter-950: #111d1c;
}SCSS
$pitter-patter: #9bc2bd;
$pitter-patter-rgb: 155, 194, 189;
$pitter-patter-light: mix(#fff, $pitter-patter, 20%);
$pitter-patter-dark: mix(#000, $pitter-patter, 20%);
.element {
color: $pitter-patter;
box-shadow: 0 0 0 2px rgba($pitter-patter, 0.35);
}