Nazwany kolor · #F6A08C
Poppy Petal
Poppy Petal to #F6A08C: rgb(246 160 140), hsl(11 85% 76%), oklch(0.787 0.107 33.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Poppy Petal color name →
#F6A08C
oklch(0.787 0.107 33.7)
Konwersje koloru
- HEX
- #f6a08c
- RGB
- rgb(246 160 140)
- HSL
- hsl(11 85% 76%)
- HWB
- hwb(11 55% 4%)
- OKLCH
- oklch(0.787 0.107 33.7)
- OKLab
- oklab(0.787 0.089 0.06)
- CIE Lab
- lab(74.38 31.23 24.38)
- LCH
- lch(74.38 39.62 38)
- CMYK
- cmyk(0% 35% 43% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F8AA97
- F9B3A3
- FBBDAE
- FCC6BA
- FDD0C5
- FED9D0
- FFE3DC
- FFECE8
- FFF6F3
Odcienie ciemniejsze
- D68B79
- B77667
- 986155
- 7B4E43
- 5F3B33
- 452923
- 2C1914
- 150907
- 030101
Tony
- EA9D8B
- DE9A8A
- D39789
- C79488
- BB9187
- AF8E86
- A48A84
- 988783
- 8C8481
Harmonie kolorów
Komplementarna +180°
- F6A08C
Poppy Petal
- 5ACBE3
≈ Watercourse
Analogowa -30° +30°
- F6A08C
Poppy Petal
- F49CB2
≈ Harmonious Rose
- EAAA6E
≈ Dune King
Triada +120° +240°
- F6A08C
Poppy Petal
- 81CE9A
≈ Garden Glow
- A4B5FF
≈ Wondrous Wisteria
Komplementarna rozszczepiona +150° +210°
- F6A08C
Poppy Petal
- 5CD0C1
≈ Patina
- 7BC1F9
≈ Maya Blue
Tetrada +90° +180° +270°
- F6A08C
Poppy Petal
- ABC577
≈ Old Lime
- 5ACBE3
≈ Watercourse
- C8A8F2
≈ Purple Hepatica
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.03:1 · APCA Lc 39
Ag
AAANa czerni
WCAG 10.32:1 · APCA Lc 63
Najlepszy kolor tekstu: #000000
WCAG 10.32:1 (AAA) · APCA Lc 63
Contrast pairs
Fragmenty kodu
CSS
:root {
--poppy-petal: #f6a08c;
--poppy-petal-rgb: 246 160 140;
--poppy-petal-oklch: oklch(0.787 0.107 33.7);
}
.element {
color: var(--poppy-petal);
background-color: hsl(11 85% 76%);
border-color: oklch(0.787 0.107 33.7);
}Tailwind CSS v4
@theme {
--color-poppy-petal: #f6a08c;
--color-poppy-petal-50: #ffebe0;
--color-poppy-petal-100: #ffdcd0;
--color-poppy-petal-200: #fec5b5;
--color-poppy-petal-300: #e8a492;
--color-poppy-petal-400: #d68774;
--color-poppy-petal-500: #c26a56;
--color-poppy-petal-600: #a45a49;
--color-poppy-petal-700: #84483a;
--color-poppy-petal-800: #62332a;
--color-poppy-petal-900: #45231c;
--color-poppy-petal-950: #2c120d;
}SCSS
$poppy-petal: #f6a08c;
$poppy-petal-rgb: 246, 160, 140;
$poppy-petal-light: mix(#fff, $poppy-petal, 20%);
$poppy-petal-dark: mix(#000, $poppy-petal, 20%);
.element {
color: $poppy-petal;
box-shadow: 0 0 0 2px rgba($poppy-petal, 0.35);
}