Nazwany kolor · #F9C0C4
Azalea Pink
Azalea Pink to #F9C0C4: rgb(249 192 196), hsl(356 83% 86%), oklch(0.86 0.066 13.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Azalea Pink color name →
#F9C0C4
oklch(0.86 0.066 13.8)
Konwersje koloru
- HEX
- #f9c0c4
- RGB
- rgb(249 192 196)
- HSL
- hsl(356 83% 86%)
- HWB
- hwb(356 75% 2%)
- OKLCH
- oklch(0.86 0.066 13.8)
- OKLab
- oklab(0.86 0.064 0.016)
- CIE Lab
- lab(83.03 21.48 6.3)
- LCH
- lch(83.03 22.38 16.3)
- CMYK
- cmyk(0% 23% 21% 2%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FAC6CA
- FBCDD0
- FCD3D5
- FDD9DB
- FDDFE1
- FEE6E7
- FEECED
- FFF2F3
- FFF9F9
Odcienie ciemniejsze
- D9A7AA
- B98E91
- 9A7678
- 7D5F61
- 61494A
- 463435
- 2C2021
- 150E0E
- 030202
Tony
- EDB9BD
- E0B3B6
- D4ADAF
- C8A6A8
- BBA0A1
- AF999B
- A39394
- 988D8D
- 8C8687
Harmonie kolorów
Komplementarna +180°
- F9C0C4
Azalea Pink
- 9EDFDD
≈ Pale Pastel
Analogowa -30° +30°
- F9C0C4
Azalea Pink
- F1C0DC
≈ Rosy Nectar
- F7C4AF
≈ Coral Bisque
Triada +120° +240°
- F9C0C4
Azalea Pink
- C0DBAF
≈ A Mann’s Mint
- B4D4FC
≈ Ice Cold Stare
Komplementarna rozszczepiona +150° +210°
- F9C0C4
Azalea Pink
- AADFC5
≈ Mountain Mint
- A2DBF1
≈ Mizu Cyan
Tetrada +90° +180° +270°
- F9C0C4
Azalea Pink
- D8D4A2
≈ Cream Cheese Avocado
- 9EDFDD
≈ Pale Pastel
- CBCCFB
≈ Lavender Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.57:1 · APCA Lc 26
Ag
AAANa czerni
WCAG 13.36:1 · APCA Lc 77
Najlepszy kolor tekstu: #000000
WCAG 13.36:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--azalea-pink: #f9c0c4;
--azalea-pink-rgb: 249 192 196;
--azalea-pink-oklch: oklch(0.86 0.066 13.8);
}
.element {
color: var(--azalea-pink);
background-color: hsl(356 83% 86%);
border-color: oklch(0.86 0.066 13.8);
}Tailwind CSS v4
@theme {
--color-azalea-pink: #f9c0c4;
--color-azalea-pink-50: #ffeeef;
--color-azalea-pink-100: #fde0e0;
--color-azalea-pink-200: #efcacb;
--color-azalea-pink-300: #d7aaac;
--color-azalea-pink-400: #c28f93;
--color-azalea-pink-500: #ad7479;
--color-azalea-pink-600: #926367;
--color-azalea-pink-700: #754f52;
--color-azalea-pink-800: #57393c;
--color-azalea-pink-900: #3d2729;
--color-azalea-pink-950: #261517;
}SCSS
$azalea-pink: #f9c0c4;
$azalea-pink-rgb: 249, 192, 196;
$azalea-pink-light: mix(#fff, $azalea-pink, 20%);
$azalea-pink-dark: mix(#000, $azalea-pink, 20%);
.element {
color: $azalea-pink;
box-shadow: 0 0 0 2px rgba($azalea-pink, 0.35);
}