Nazwany kolor · #A75546
Portsmouth Spice
Portsmouth Spice to #A75546: rgb(167 85 70), hsl(9 41% 46%), oklch(0.545 0.111 31.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Portsmouth Spice color name →
#A75546
oklch(0.545 0.111 31.7)
Konwersje koloru
- HEX
- #a75546
- RGB
- rgb(167 85 70)
- HSL
- hsl(9 41% 46%)
- HWB
- hwb(9 27% 35%)
- OKLCH
- oklch(0.545 0.111 31.7)
- OKLab
- oklab(0.545 0.095 0.058)
- CIE Lab
- lab(46.29 33.42 24.88)
- LCH
- lch(46.29 41.66 36.7)
- CMYK
- cmyk(0% 49% 58% 35%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B16658
- BB7669
- C4877B
- CD988D
- D6A99F
- DFBAB2
- E7CBC5
- EFDCD8
- F7EDEB
Odcienie ciemniejsze
- 91493C
- 7B3D32
- 663128
- 52261E
- 3E1C15
- 2C110D
- 1A0805
- 0A0202
- 010000
Tony
- A45A4C
- A15F52
- 9D6458
- 9A685E
- 966C64
- 92706A
- 8E746F
- 8A7875
- 857C7A
Harmonie kolorów
Komplementarna +180°
- A75546
Portsmouth Spice
- 007E90
≈ Metallic Seaweed
Analogowa -30° +30°
- A75546
Portsmouth Spice
- A4526B
≈ Raspberry Patch
- 9E5F1F
≈ Tortoiseshell Specs
Triada +120° +240°
- A75546
Portsmouth Spice
- 35824E
≈ Monster Monstera
- 596BB1
≈ Amparo Blue
Komplementarna rozszczepiona +150° +210°
- A75546
Portsmouth Spice
- 008274
≈ Green Garlands
- 2677AB
≈ Larimar Blue
Tetrada +90° +180° +270°
- A75546
Portsmouth Spice
- 667A26
≈ Castelvetrano Olive
- 007E90
≈ Metallic Seaweed
- 7C5FA6
≈ Genestealer Purple
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.20:1 · APCA Lc 75
Ag
FailNa czerni
WCAG 4.03:1 · APCA Lc 26
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.20:1 (AA) · APCA Lc 75
Contrast pairs
Fragmenty kodu
CSS
:root {
--portsmouth-spice: #a75546;
--portsmouth-spice-rgb: 167 85 70;
--portsmouth-spice-oklch: oklch(0.545 0.111 31.7);
}
.element {
color: var(--portsmouth-spice);
background-color: hsl(9 41% 46%);
border-color: oklch(0.545 0.111 31.7);
}Tailwind CSS v4
@theme {
--color-portsmouth-spice: #a75546;
--color-portsmouth-spice-50: #ffebe1;
--color-portsmouth-spice-100: #ffdbd0;
--color-portsmouth-spice-200: #ffc4b5;
--color-portsmouth-spice-300: #eaa392;
--color-portsmouth-spice-400: #d88575;
--color-portsmouth-spice-500: #c56856;
--color-portsmouth-spice-600: #a6584a;
--color-portsmouth-spice-700: #85463b;
--color-portsmouth-spice-800: #63322b;
--color-portsmouth-spice-900: #46221d;
--color-portsmouth-spice-950: #2d110d;
}SCSS
$portsmouth-spice: #a75546;
$portsmouth-spice-rgb: 167, 85, 70;
$portsmouth-spice-light: mix(#fff, $portsmouth-spice, 20%);
$portsmouth-spice-dark: mix(#000, $portsmouth-spice, 20%);
.element {
color: $portsmouth-spice;
box-shadow: 0 0 0 2px rgba($portsmouth-spice, 0.35);
}