最も近い色名 · #D32123
#D32123
最も近い色名: Heroic Red
#D32123（rgb(211 33 35)、hsl(359 73% 48%)、oklch(0.557 0.21 27.1)）に最も近い色名はHeroic Redです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#D32123
oklch(0.557 0.21 27.1)
カラー変換
- HEX
- #d32123
- RGB
- rgb(211 33 35)
- HSL
- hsl(359 73% 48%)
- HWB
- hwb(359 13% 17%)
- OKLCH
- oklch(0.557 0.21 27.1)
- OKLab
- oklab(0.557 0.187 0.096)
- CIE Lab
- lab(46.56 66.23 47.62)
- LCH
- lch(46.56 81.57 35.7)
- CMYK
- cmyk(0% 84% 83% 17%)
ティント · シェード · トーン
ティント
- DB443C
- E25D53
- E87368
- EE887D
- F39D92
- F7B1A8
- FAC4BD
- FDD8D3
- FEEBE9
シェード
- B71B1D
- 9C1617
- 821011
- 690B0C
- 510607
- 3A0304
- 240101
- 100000
- 020000
トーン
- CD3530
- C6433B
- BF4E45
- B7574E
- B06057
- A76760
- 9F6E68
- 957570
- 8B7A78
カラーハーモニー
補色 +180°
- D32123
Heroic Red
- 008390
≈ True Teal
類似色 -30° +30°
- D32123
Heroic Red
- CA2075
≈ Prince Charming
- AD5B00
≈ Elm Brown Red
トライアド +120° +240°
- D32123
Heroic Red
- 008C32
≈ Cold Green
- 3D64EC
≈ The Rainbow Fish
スプリットコンプリメンタリー +150° +210°
- D32123
Heroic Red
- 008773
≈ Summer Turquoise
- 007DB2
≈ Capstan
テトラード +90° +180° +270°
- D32123
Heroic Red
- 6F7D00
≈ Topiary Garden
- 008390
≈ True Teal
- 854BDD
≈ Gloomy Purple
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.23:1 · APCA Lc 74
Ag
Fail黒の上
WCAG 4.01:1 · APCA Lc 28
最適な文字色: #FFFFFF
WCAG 5.23:1 (AA) · APCA Lc 74
Contrast pairs
コードスニペット
CSS
:root {
--heroic-red: #d32123;
--heroic-red-rgb: 211 33 35;
--heroic-red-oklch: oklch(0.557 0.21 27.1);
}
.element {
color: var(--heroic-red);
background-color: hsl(359 73% 48%);
border-color: oklch(0.557 0.21 27.1);
}Tailwind CSS v4
@theme {
--color-heroic-red: #d32123;
--color-heroic-red-50: #ffdfd3;
--color-heroic-red-100: #ffcebf;
--color-heroic-red-200: #ffb1a0;
--color-heroic-red-300: #ff8976;
--color-heroic-red-400: #ff6055;
--color-heroic-red-500: #f22b2c;
--color-heroic-red-600: #cc2827;
--color-heroic-red-700: #a4201f;
--color-heroic-red-800: #7b1418;
--color-heroic-red-900: #570e10;
--color-heroic-red-950: #3a0003;
}SCSS
$heroic-red: #d32123;
$heroic-red-rgb: 211, 33, 35;
$heroic-red-light: mix(#fff, $heroic-red, 20%);
$heroic-red-dark: mix(#000, $heroic-red, 20%);
.element {
color: $heroic-red;
box-shadow: 0 0 0 2px rgba($heroic-red, 0.35);
}