色名 · #DD1111
Stoplight
Stoplightは#DD1111：rgb(221 17 17)、hsl(0 86% 47%)、oklch(0.568 0.227 28.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Stoplight color name →
#DD1111
oklch(0.568 0.227 28.6)
カラー変換
- HEX
- #dd1111
- RGB
- rgb(221 17 17)
- HSL
- hsl(0 86% 47%)
- HWB
- hwb(0 7% 13%)
- OKLCH
- oklch(0.568 0.227 28.6)
- OKLab
- oklab(0.568 0.199 0.109)
- CIE Lab
- lab(47.65 71.17 57.61)
- LCH
- lch(47.65 91.56 39)
- CMYK
- cmyk(0% 92% 92% 13%)
ティント · シェード · トーン
ティント
- E43F33
- EA5A4C
- F07263
- F58779
- F99C8F
- FCB0A5
- FEC4BB
- FFD8D2
- FFEBE8
シェード
- C00D0D
- A40909
- 880606
- 6E0404
- 550202
- 3D0101
- 260000
- 110000
- 020000
トーン
- D62F26
- CE3F34
- C64C40
- BE564A
- B55F54
- AC675D
- A26E66
- 98746F
- 8C7A78
カラーハーモニー
補色 +180°
- DD1111
Stoplight
- 008695
≈ Painted Sea
類似色 -30° +30°
- DD1111
Stoplight
- D40C75
≈ Moth Orchid
- B05F00
≈ Orange Brown
トライアド +120° +240°
- DD1111
Stoplight
- 008F3B
≈ Viper Green
- 4263F9
≈ Secret of Mana
スプリットコンプリメンタリー +150° +210°
- DD1111
Stoplight
- 008A78
≈ Emerald Enchantment
- 007FB9
≈ Meissen Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.04:1 · APCA Lc 72
Ag
Fail黒の上
WCAG 4.16:1 · APCA Lc 29
最適な文字色: #FFFFFF
WCAG 5.04:1 (AA) · APCA Lc 72
Contrast pairs
コードスニペット
CSS
:root {
--stoplight: #dd1111;
--stoplight-rgb: 221 17 17;
--stoplight-oklch: oklch(0.568 0.227 28.6);
}
.element {
color: var(--stoplight);
background-color: hsl(0 86% 47%);
border-color: oklch(0.568 0.227 28.6);
}Tailwind CSS v4
@theme {
--color-stoplight: #dd1111;
--color-stoplight-50: #ffdece;
--color-stoplight-100: #ffccba;
--color-stoplight-200: #ffad99;
--color-stoplight-300: #ff846d;
--color-stoplight-400: #ff5849;
--color-stoplight-500: #f91012;
--color-stoplight-600: #d21714;
--color-stoplight-700: #a91411;
--color-stoplight-800: #7f0a0f;
--color-stoplight-900: #5a070a;
--color-stoplight-950: #3c0000;
}SCSS
$stoplight: #dd1111;
$stoplight-rgb: 221, 17, 17;
$stoplight-light: mix(#fff, $stoplight, 20%);
$stoplight-dark: mix(#000, $stoplight, 20%);
.element {
color: $stoplight;
box-shadow: 0 0 0 2px rgba($stoplight, 0.35);
}