Nazwany kolor · #FFB3DE
Hot Aquarelle Pink
Hot Aquarelle Pink to #FFB3DE: rgb(255 179 222), hsl(326 100% 85%), oklch(0.851 0.103 344.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Hot Aquarelle Pink color name →
#FFB3DE
oklch(0.851 0.103 344.6)
Konwersje koloru
- HEX
- #ffb3de
- RGB
- rgb(255 179 222)
- HSL
- hsl(326 100% 85%)
- HWB
- hwb(326 70% 0%)
- OKLCH
- oklch(0.851 0.103 344.6)
- OKLab
- oklab(0.851 0.099 -0.027)
- CIE Lab
- lab(81.29 33.04 -10.02)
- LCH
- lch(81.29 34.52 343.1)
- CMYK
- cmyk(0% 30% 13% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFBBE1
- FFC2E5
- FFCAE8
- FFD2EB
- FFD9EF
- FFE1F2
- FFE8F5
- FFF0F8
- FFF7FC
Odcienie ciemniejsze
- DE9BC1
- BE84A5
- 9E6E89
- 80586F
- 634355
- 482F3D
- 2E1D26
- 160C12
- 030102
Tony
- F2AED4
- E5A9CB
- D8A4C1
- CB9FB7
- BF9AAE
- B295A5
- A6909B
- 998A92
- 8C8589
Harmonie kolorów
Komplementarna +180°
- FFB3DE
Hot Aquarelle Pink
- 8AE4BD
≈ Bubble Algae
Analogowa -30° +30°
- FFB3DE
Hot Aquarelle Pink
- E7BAFD
≈ Euphoria
- FFB9BD
≈ Hard Candy
Triada +120° +240°
- FFB3DE
Hot Aquarelle Pink
- D8D281
≈ Treasury
- 81DCFF
≈ Tranquil Pool
Komplementarna rozszczepiona +150° +210°
- FFB3DE
Hot Aquarelle Pink
- B2DD99
≈ Green Gooseberry
- 73E3E2
≈ Turquoise Chalk
Tetrada +90° +180° +270°
- FFB3DE
Hot Aquarelle Pink
- F6C480
≈ Jackfruit
- 8AE4BD
≈ Bubble Algae
- ADD1FF
≈ Ice Cold Stare
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.64:1 · APCA Lc 29
Ag
AAANa czerni
WCAG 12.75:1 · APCA Lc 74
Najlepszy kolor tekstu: #000000
WCAG 12.75:1 (AAA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
CSS
:root {
--hot-aquarelle-pink: #ffb3de;
--hot-aquarelle-pink-rgb: 255 179 222;
--hot-aquarelle-pink-oklch: oklch(0.851 0.103 344.6);
}
.element {
color: var(--hot-aquarelle-pink);
background-color: hsl(326 100% 85%);
border-color: oklch(0.851 0.103 344.6);
}Tailwind CSS v4
@theme {
--color-hot-aquarelle-pink: #ffb3de;
--color-hot-aquarelle-pink-50: #ffeafb;
--color-hot-aquarelle-pink-100: #ffdbef;
--color-hot-aquarelle-pink-200: #f6c3dd;
--color-hot-aquarelle-pink-300: #dfa2c2;
--color-hot-aquarelle-pink-400: #ca85ad;
--color-hot-aquarelle-pink-500: #b66996;
--color-hot-aquarelle-pink-600: #9a597f;
--color-hot-aquarelle-pink-700: #7b4766;
--color-hot-aquarelle-pink-800: #5b334c;
--color-hot-aquarelle-pink-900: #402335;
--color-hot-aquarelle-pink-950: #281220;
}SCSS
$hot-aquarelle-pink: #ffb3de;
$hot-aquarelle-pink-rgb: 255, 179, 222;
$hot-aquarelle-pink-light: mix(#fff, $hot-aquarelle-pink, 20%);
$hot-aquarelle-pink-dark: mix(#000, $hot-aquarelle-pink, 20%);
.element {
color: $hot-aquarelle-pink;
box-shadow: 0 0 0 2px rgba($hot-aquarelle-pink, 0.35);
}