色名 · #E32636
Alizarin
Alizarinは#E32636：rgb(227 38 54)、hsl(355 77% 52%)、oklch(0.591 0.22 23.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Alizarin color name →
#E32636
oklch(0.591 0.22 23.8)
カラー変換
- HEX
- #e32636
- RGB
- rgb(227 38 54)
- HSL
- hsl(355 77% 52%)
- HWB
- hwb(355 15% 11%)
- OKLCH
- oklch(0.591 0.22 23.8)
- OKLab
- oklab(0.591 0.201 0.089)
- CIE Lab
- lab(50.34 69.94 42.11)
- LCH
- lch(50.34 81.64 31.1)
- CMYK
- cmyk(0% 83% 76% 11%)
ティント · シェード · トーン
ティント
- E9484B
- EF615F
- F47773
- F88C86
- FBA09A
- FEB3AE
- FFC6C2
- FFD9D6
- FFECEA
シェード
- C5202E
- A81925
- 8C131E
- 710D16
- 57080F
- 3F0408
- 270203
- 120101
- 030000
トーン
- DB393F
- D24748
- CA5250
- C15B57
- B7635F
- AE6A66
- A3706C
- 987673
- 8D7B7A
カラーハーモニー
補色 +180°
- E32636
Alizarin
- 008F99
≈ Splashy
類似色 -30° +30°
- E32636
Alizarin
- D72987
≈ Highlighter Lilac
- BF6000
≈ Crema
トライアド +120° +240°
- E32636
Alizarin
- 00991C
≈ Turf Master
- 3570FE
≈ Hailey Blue
スプリットコンプリメンタリー +150° +210°
- E32636
Alizarin
- 009378
≈ Dòu Lǜ Green
- 0088BB
≈ Mermaid Dreams
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.56:1 · APCA Lc 70
Ag
AA黒の上
WCAG 4.59:1 · APCA Lc 32
最適な文字色: #000000
WCAG 4.59:1 (AA) · APCA Lc 32
Contrast pairs
コードスニペット
CSS
:root {
--alizarin: #e32636;
--alizarin-rgb: 227 38 54;
--alizarin-oklch: oklch(0.591 0.22 23.8);
}
.element {
color: var(--alizarin);
background-color: hsl(355 77% 52%);
border-color: oklch(0.591 0.22 23.8);
}Tailwind CSS v4
@theme {
--color-alizarin: #e32636;
--color-alizarin-50: #ffddd5;
--color-alizarin-100: #ffcbc2;
--color-alizarin-200: #ffaea3;
--color-alizarin-300: #ff847b;
--color-alizarin-400: #ff5a5b;
--color-alizarin-500: #f61935;
--color-alizarin-600: #d01c2e;
--color-alizarin-700: #a71825;
--color-alizarin-800: #7d0e1d;
--color-alizarin-900: #590913;
--color-alizarin-950: #3b0005;
}SCSS
$alizarin: #e32636;
$alizarin-rgb: 227, 38, 54;
$alizarin-light: mix(#fff, $alizarin, 20%);
$alizarin-dark: mix(#000, $alizarin, 20%);
.element {
color: $alizarin;
box-shadow: 0 0 0 2px rgba($alizarin, 0.35);
}