Cor nomeada · #A42E37
Show-Stopper
Show-Stopper é #A42E37: rgb(164 46 55), hsl(355 56% 41%), oklch(0.485 0.154 21). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Red mean? → · Show-Stopper color name →
#A42E37
oklch(0.485 0.154 21)
Conversões de cor
- HEX
- #a42e37
- RGB
- rgb(164 46 55)
- HSL
- hsl(355 56% 41%)
- HWB
- hwb(355 18% 36%)
- OKLCH
- oklch(0.485 0.154 21)
- OKLab
- oklab(0.485 0.143 0.055)
- CIE Lab
- lab(38.64 49.11 24.38)
- LCH
- lch(38.64 54.83 26.4)
- CMYK
- cmyk(0% 72% 66% 36%)
Tons claros · Sombras · Tons
Tons claros
- AF464A
- BA5B5C
- C5706F
- CF8483
- D89997
- E1ADAB
- E9C1BF
- F1D6D4
- F8EAE9
Sombras
- 8E272E
- 791F26
- 64181E
- 501216
- 3D0B0F
- 2B0608
- 1A0203
- 0A0101
- 010000
Tons
- A23A3F
- A04446
- 9D4D4D
- 9A5555
- 975D5C
- 936463
- 8F6C6A
- 8B7372
- 867979
Harmonias de cor
Complementar +180°
- A42E37
Show-Stopper
- 006D72
≈ Teal Motif
Análoga -30° +30°
- A42E37
Show-Stopper
- 9B2F6A
≈ Amaranth Deep Purple
- 954500
≈ Roux
Tríade +120° +240°
- A42E37
Show-Stopper
- 1D730A
≈ Battle Cat
- 275AB4
≈ Bottled Sea
Complementar dividida +150° +210°
- A42E37
Show-Stopper
- 007058
≈ Teal Dark Green
- 00688C
≈ Pulsating Blue
Tétrade +90° +180° +270°
- A42E37
Show-Stopper
- 626400
≈ Mud Green
- 006D72
≈ Teal Motif
- 6249AD
≈ Swiss Plum
Contraste e acessibilidade
Ag
AASobre branco
WCAG 6.94:1 · APCA Lc 83
Ag
FailSobre preto
WCAG 3.02:1 · APCA Lc 19
Melhor cor de texto: #FFFFFF
WCAG 6.94:1 (AA) · APCA Lc 83
Contrast pairs
Trechos de código
CSS
:root {
--show-stopper: #a42e37;
--show-stopper-rgb: 164 46 55;
--show-stopper-oklch: oklch(0.485 0.154 21);
}
.element {
color: var(--show-stopper);
background-color: hsl(355 56% 41%);
border-color: oklch(0.485 0.154 21);
}Tailwind CSS v4
@theme {
--color-show-stopper: #a42e37;
--color-show-stopper-50: #ffe5e1;
--color-show-stopper-100: #ffd4d0;
--color-show-stopper-200: #ffbab6;
--color-show-stopper-300: #fc9792;
--color-show-stopper-400: #eb7576;
--color-show-stopper-500: #d95258;
--color-show-stopper-600: #b7474b;
--color-show-stopper-700: #93383c;
--color-show-stopper-800: #6e282d;
--color-show-stopper-900: #4d1b1e;
--color-show-stopper-950: #330a0e;
}SCSS
$show-stopper: #a42e37;
$show-stopper-rgb: 164, 46, 55;
$show-stopper-light: mix(#fff, $show-stopper, 20%);
$show-stopper-dark: mix(#000, $show-stopper, 20%);
.element {
color: $show-stopper;
box-shadow: 0 0 0 2px rgba($show-stopper, 0.35);
}