Nazwany kolor · #BA403A
Naughty Hottie
Naughty Hottie to #BA403A: rgb(186 64 58), hsl(3 52% 48%), oklch(0.543 0.159 26.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Naughty Hottie color name →
#BA403A
oklch(0.543 0.159 26.6)
Konwersje koloru
- HEX
- #ba403a
- RGB
- rgb(186 64 58)
- HSL
- hsl(3 52% 48%)
- HWB
- hwb(3 23% 27%)
- OKLCH
- oklch(0.543 0.159 26.6)
- OKLab
- oklab(0.543 0.142 0.071)
- CIE Lab
- lab(45.44 49.66 31.79)
- LCH
- lch(45.44 58.96 32.6)
- CMYK
- cmyk(0% 66% 69% 27%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C3554D
- CC6960
- D47C73
- DC8F86
- E3A29A
- EAB4AE
- F0C7C2
- F5D9D6
- FBECEA
Odcienie ciemniejsze
- A13631
- 892D28
- 722420
- 5C1B18
- 461310
- 320B09
- 1E0504
- 0D0101
- 020000
Tony
- B64942
- B15149
- AC5851
- A75F58
- A1655F
- 9C6B65
- 96716C
- 8F7673
- 887B79
Harmonie kolorów
Komplementarna +180°
- BA403A
Naughty Hottie
- 007E8B
≈ Metallic Seaweed
Analogowa -30° +30°
- BA403A
Naughty Hottie
- B33E72
≈ Fiery Fuchsia
- A75700
≈ Windsor Brown
Triada +120° +240°
- BA403A
Naughty Hottie
- 0E8730
≈ Broccoli Paradise
- 4568CB
≈ God of Rain
Komplementarna rozszczepiona +150° +210°
- BA403A
Naughty Hottie
- 00826E
≈ Emperor’s Silk
- 0078AB
≈ Deluge
Tetrada +90° +180° +270°
- BA403A
Naughty Hottie
- 6C7800
≈ Murky Green
- 007E8B
≈ Metallic Seaweed
- 7A56BF
≈ Fuchsia Blue
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.40:1 · APCA Lc 76
Ag
FailNa czerni
WCAG 3.88:1 · APCA Lc 26
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.40:1 (AA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--naughty-hottie: #ba403a;
--naughty-hottie-rgb: 186 64 58;
--naughty-hottie-oklch: oklch(0.543 0.159 26.6);
}
.element {
color: var(--naughty-hottie);
background-color: hsl(3 52% 48%);
border-color: oklch(0.543 0.159 26.6);
}Tailwind CSS v4
@theme {
--color-naughty-hottie: #ba403a;
--color-naughty-hottie-50: #ffe5dc;
--color-naughty-hottie-100: #ffd5ca;
--color-naughty-hottie-200: #ffbbae;
--color-naughty-hottie-300: #fe9789;
--color-naughty-hottie-400: #ed756b;
--color-naughty-hottie-500: #db514a;
--color-naughty-hottie-600: #b9463f;
--color-naughty-hottie-700: #953832;
--color-naughty-hottie-800: #6f2725;
--color-naughty-hottie-900: #4e1a19;
--color-naughty-hottie-950: #340a0a;
}SCSS
$naughty-hottie: #ba403a;
$naughty-hottie-rgb: 186, 64, 58;
$naughty-hottie-light: mix(#fff, $naughty-hottie, 20%);
$naughty-hottie-dark: mix(#000, $naughty-hottie, 20%);
.element {
color: $naughty-hottie;
box-shadow: 0 0 0 2px rgba($naughty-hottie, 0.35);
}