Nazwany kolor · #F4A461
Shrimp Cocktail
Shrimp Cocktail to #F4A461: rgb(244 164 97), hsl(27 87% 67%), oklch(0.784 0.126 59.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Shrimp Cocktail color name →
#F4A461
oklch(0.784 0.126 59.4)
Konwersje koloru
- HEX
- #f4a461
- RGB
- rgb(244 164 97)
- HSL
- hsl(27 87% 67%)
- HWB
- hwb(27 38% 4%)
- OKLCH
- oklch(0.784 0.126 59.4)
- OKLab
- oklab(0.784 0.064 0.109)
- CIE Lab
- lab(74.49 25.77 46.89)
- LCH
- lch(74.49 53.51 61.2)
- CMYK
- cmyk(0% 33% 60% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F6AD72
- F8B783
- F9C093
- FBC9A3
- FCD2B2
- FDDBC2
- FEE4D1
- FEEDE0
- FFF6F0
Odcienie ciemniejsze
- D48E53
- B57946
- 976439
- 7A502D
- 5E3D21
- 442B15
- 2B1A0B
- 140A03
- 030100
Tony
- E8A166
- DD9D6A
- D19A6E
- C59772
- BA9375
- AE8F78
- A38C7A
- 97887C
- 8C847E
Harmonie kolorów
Komplementarna +180°
- F4A461
Shrimp Cocktail
- 66C3FF
≈ Maya Blue
Analogowa -30° +30°
- F4A461
Shrimp Cocktail
- FF9889
≈ Mona Lisa
- D9B44F
≈ Farm Straw
Triada +120° +240°
- F4A461
Shrimp Cocktail
- 41D3BB
≈ Simply Aqua
- C4A6FE
≈ Diva
Komplementarna rozszczepiona +150° +210°
- F4A461
Shrimp Cocktail
- 30CEE4
≈ Picnic Day Sky
- 9DB6FF
≈ Truesky Gloxym
Tetrada +90° +180° +270°
- F4A461
Shrimp Cocktail
- 7BCF8C
≈ Jube Green
- 66C3FF
≈ Maya Blue
- E69BE0
≈ Love Dust
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 {
--shrimp-cocktail: #f4a461;
--shrimp-cocktail-rgb: 244 164 97;
--shrimp-cocktail-oklch: oklch(0.784 0.126 59.4);
}
.element {
color: var(--shrimp-cocktail);
background-color: hsl(27 87% 67%);
border-color: oklch(0.784 0.126 59.4);
}Tailwind CSS v4
@theme {
--color-shrimp-cocktail: #f4a461;
--color-shrimp-cocktail-50: #ffeed1;
--color-shrimp-cocktail-100: #ffdfbe;
--color-shrimp-cocktail-200: #fcc99d;
--color-shrimp-cocktail-300: #e7a873;
--color-shrimp-cocktail-400: #d58b4c;
--color-shrimp-cocktail-500: #c26e17;
--color-shrimp-cocktail-600: #a45e18;
--color-shrimp-cocktail-700: #834b13;
--color-shrimp-cocktail-800: #62350d;
--color-shrimp-cocktail-900: #452408;
--color-shrimp-cocktail-950: #2c1300;
}SCSS
$shrimp-cocktail: #f4a461;
$shrimp-cocktail-rgb: 244, 164, 97;
$shrimp-cocktail-light: mix(#fff, $shrimp-cocktail, 20%);
$shrimp-cocktail-dark: mix(#000, $shrimp-cocktail, 20%);
.element {
color: $shrimp-cocktail;
box-shadow: 0 0 0 2px rgba($shrimp-cocktail, 0.35);
}