Nazwany kolor · #CA3F16
Sauce Piquante
Sauce Piquante to #CA3F16: rgb(202 63 22), hsl(14 80% 44%), oklch(0.565 0.182 35.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Sauce Piquante color name →
#CA3F16
oklch(0.565 0.182 35.7)
Konwersje koloru
- HEX
- #ca3f16
- RGB
- rgb(202 63 22)
- HSL
- hsl(14 80% 44%)
- HWB
- hwb(14 9% 21%)
- OKLCH
- oklch(0.565 0.182 35.7)
- OKLab
- oklab(0.565 0.148 0.106)
- CIE Lab
- lab(47.95 54.61 53.58)
- LCH
- lch(47.95 76.5 44.5)
- CMYK
- cmyk(0% 69% 89% 21%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D25635
- D96B4E
- E07E64
- E6917A
- ECA490
- F1B6A6
- F6C8BC
- F9DAD2
- FDEDE8
Odcienie ciemniejsze
- AF3512
- 952C0D
- 7C2309
- 641B06
- 4D1203
- 370A02
- 220401
- 0F0100
- 020000
Tony
- C44928
- BE5236
- B75A41
- B1604B
- AA6755
- A26D5E
- 9B7267
- 92776F
- 8A7C78
Harmonie kolorów
Komplementarna +180°
- CA3F16
Sauce Piquante
- 00849B
≈ Zircon Blue
Analogowa -30° +30°
- CA3F16
Sauce Piquante
- C73766
≈ Raspberry Jam
- A76400
≈ Butter Fudge
Triada +120° +240°
- CA3F16
Sauce Piquante
- 008D52
≈ Iceland Green
- 5C65DE
≈ Exodus Fruit
Komplementarna rozszczepiona +150° +210°
- CA3F16
Sauce Piquante
- 00887E
≈ Eyeshadow Turquoise
- 007BC5
≈ Star of Life
Tetrada +90° +180° +270°
- CA3F16
Sauce Piquante
- 618400
≈ Enchanted Forest
- 00849B
≈ Zircon Blue
- 9151C9
≈ Morado Purple
Kontrast i dostępność
Ag
AANa bieli
WCAG 4.95:1 · APCA Lc 73
Ag
FailNa czerni
WCAG 4.23:1 · APCA Lc 29
Najlepszy kolor tekstu: #FFFFFF
WCAG 4.95:1 (AA) · APCA Lc 73
Contrast pairs
Fragmenty kodu
CSS
:root {
--sauce-piquante: #ca3f16;
--sauce-piquante-rgb: 202 63 22;
--sauce-piquante-oklch: oklch(0.565 0.182 35.7);
}
.element {
color: var(--sauce-piquante);
background-color: hsl(14 80% 44%);
border-color: oklch(0.565 0.182 35.7);
}Tailwind CSS v4
@theme {
--color-sauce-piquante: #ca3f16;
--color-sauce-piquante-50: #ffe4d0;
--color-sauce-piquante-100: #ffd3bc;
--color-sauce-piquante-200: #ffb99b;
--color-sauce-piquante-300: #ff9471;
--color-sauce-piquante-400: #f6704c;
--color-sauce-piquante-500: #e5481a;
--color-sauce-piquante-600: #c13f1a;
--color-sauce-piquante-700: #9b3215;
--color-sauce-piquante-800: #742211;
--color-sauce-piquante-900: #52170a;
--color-sauce-piquante-950: #370601;
}SCSS
$sauce-piquante: #ca3f16;
$sauce-piquante-rgb: 202, 63, 22;
$sauce-piquante-light: mix(#fff, $sauce-piquante, 20%);
$sauce-piquante-dark: mix(#000, $sauce-piquante, 20%);
.element {
color: $sauce-piquante;
box-shadow: 0 0 0 2px rgba($sauce-piquante, 0.35);
}