Nazwany kolor · #A83C3F
California Poppy
California Poppy to #A83C3F: rgb(168 60 63), hsl(358 47% 45%), oklch(0.509 0.142 22.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · California Poppy color name →
#A83C3F
oklch(0.509 0.142 22.1)
Konwersje koloru
- HEX
- #a83c3f
- RGB
- rgb(168 60 63)
- HSL
- hsl(358 47% 45%)
- HWB
- hwb(358 24% 34%)
- OKLCH
- oklch(0.509 0.142 22.1)
- OKLab
- oklab(0.509 0.132 0.054)
- CIE Lab
- lab(41.62 45.27 23.3)
- LCH
- lch(41.62 50.92 27.2)
- CMYK
- cmyk(0% 64% 63% 34%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B35151
- BD6563
- C77875
- D08B88
- D99E9B
- E2B1AE
- EAC4C2
- F1D8D6
- F8EBEA
Odcienie ciemniejsze
- 923335
- 7C2A2C
- 672123
- 52191B
- 3F1112
- 2C0A0A
- 1A0404
- 0A0101
- 010000
Tony
- A54546
- A34D4C
- 9F5453
- 9C5B59
- 986260
- 946866
- 906F6D
- 8B7573
- 867A7A
Harmonie kolorów
Komplementarna +180°
- A83C3F
California Poppy
- 00747B
≈ Scurf Green
Analogowa -30° +30°
- A83C3F
California Poppy
- A03C6E
≈ Valentine’s Day
- 9E4B00
≈ Burnt Bagel
Triada +120° +240°
- A83C3F
California Poppy
- 2A7924
≈ Nemophilist
- 3662B6
≈ Adventure of the Seas
Komplementarna rozszczepiona +150° +210°
- A83C3F
California Poppy
- 00785F
≈ Emerald Dream
- 006F97
≈ Tropic Sea
Tetrada +90° +180° +270°
- A83C3F
California Poppy
- 686C00
≈ Brownish Green
- 00747B
≈ Scurf Green
- 6A52AF
≈ Blue Marguerite
Kontrast i dostępność
Ag
AANa bieli
WCAG 6.20:1 · APCA Lc 80
Ag
FailNa czerni
WCAG 3.38:1 · APCA Lc 22
Najlepszy kolor tekstu: #FFFFFF
WCAG 6.20:1 (AA) · APCA Lc 80
Contrast pairs
Fragmenty kodu
CSS
:root {
--california-poppy: #a83c3f;
--california-poppy-rgb: 168 60 63;
--california-poppy-oklch: oklch(0.509 0.142 22.1);
}
.element {
color: var(--california-poppy);
background-color: hsl(358 47% 45%);
border-color: oklch(0.509 0.142 22.1);
}Tailwind CSS v4
@theme {
--color-california-poppy: #a83c3f;
--color-california-poppy-50: #ffe6e1;
--color-california-poppy-100: #ffd6d1;
--color-california-poppy-200: #ffbdb7;
--color-california-poppy-300: #f89a94;
--color-california-poppy-400: #e67978;
--color-california-poppy-500: #d4585a;
--color-california-poppy-600: #b34c4c;
--color-california-poppy-700: #903c3d;
--color-california-poppy-800: #6b2b2d;
--color-california-poppy-900: #4b1d1e;
--color-california-poppy-950: #310c0e;
}SCSS
$california-poppy: #a83c3f;
$california-poppy-rgb: 168, 60, 63;
$california-poppy-light: mix(#fff, $california-poppy, 20%);
$california-poppy-dark: mix(#000, $california-poppy, 20%);
.element {
color: $california-poppy;
box-shadow: 0 0 0 2px rgba($california-poppy, 0.35);
}