Nazwany kolor · #F3879C
Posy Petal
Posy Petal to #F3879C: rgb(243 135 156), hsl(348 82% 74%), oklch(0.746 0.133 8.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Posy Petal color name →
#F3879C
oklch(0.746 0.133 8.4)
Konwersje koloru
- HEX
- #f3879c
- RGB
- rgb(243 135 156)
- HSL
- hsl(348 82% 74%)
- HWB
- hwb(348 53% 5%)
- OKLCH
- oklch(0.746 0.133 8.4)
- OKLab
- oklab(0.746 0.131 0.019)
- CIE Lab
- lab(68.99 43.69 8.13)
- LCH
- lch(68.99 44.44 10.5)
- CMYK
- cmyk(0% 44% 36% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F693A6
- F8A0AF
- FAACB9
- FCB8C3
- FDC4CC
- FED0D6
- FFDBE0
- FFE7EB
- FFF3F5
Odcienie ciemniejsze
- D37587
- B46373
- 97515F
- 7A414C
- 5E3139
- 442128
- 2B1318
- 140609
- 030101
Tony
- E88799
- DD8796
- D18794
- C68691
- BB858E
- AF858B
- A48488
- 988386
- 8C8183
Harmonie kolorów
Komplementarna +180°
- F3879C
Posy Petal
- 00C6BC
≈ Swimmers Pool
Analogowa -30° +30°
- F3879C
Posy Petal
- E38AC9
≈ Blushed Bombshell
- F38D6D
≈ Moegi Green
Triada +120° +240°
- F3879C
Posy Petal
- 94BD5D
≈ Green Pepper
- 63B3FC
≈ Tiān Lán Sky
Komplementarna rozszczepiona +150° +210°
- F3879C
Posy Petal
- 56C68D
≈ Enamelled Dragon
- 0EC0E5
≈ Blue Raspberry
Tetrada +90° +180° +270°
- F3879C
Posy Petal
- C3AD3B
≈ Oil Yellow
- 00C6BC
≈ Swimmers Pool
- 9AA3FF
≈ Widowmaker
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.39:1 · APCA Lc 47
Ag
AAANa czerni
WCAG 8.75:1 · APCA Lc 55
Najlepszy kolor tekstu: #000000
WCAG 8.75:1 (AAA) · APCA Lc 55
Contrast pairs
Fragmenty kodu
CSS
:root {
--posy-petal: #f3879c;
--posy-petal-rgb: 243 135 156;
--posy-petal-oklch: oklch(0.746 0.133 8.4);
}
.element {
color: var(--posy-petal);
background-color: hsl(348 82% 74%);
border-color: oklch(0.746 0.133 8.4);
}Tailwind CSS v4
@theme {
--color-posy-petal: #f3879c;
--color-posy-petal-50: #ffe6ec;
--color-posy-petal-100: #ffd6dd;
--color-posy-petal-200: #ffbdc7;
--color-posy-petal-300: #f39ba7;
--color-posy-petal-400: #e07b8f;
--color-posy-petal-500: #cd5b75;
--color-posy-petal-600: #ad4e63;
--color-posy-petal-700: #8b3e4f;
--color-posy-petal-800: #672c3b;
--color-posy-petal-900: #491e28;
--color-posy-petal-950: #2f0d16;
}SCSS
$posy-petal: #f3879c;
$posy-petal-rgb: 243, 135, 156;
$posy-petal-light: mix(#fff, $posy-petal, 20%);
$posy-petal-dark: mix(#000, $posy-petal, 20%);
.element {
color: $posy-petal;
box-shadow: 0 0 0 2px rgba($posy-petal, 0.35);
}