色名 · #DF3F32
Bacon Strips
Bacon Stripsは#DF3F32：rgb(223 63 50)、hsl(5 73% 54%)、oklch(0.603 0.199 29)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Bacon Strips color name →
#DF3F32
oklch(0.603 0.199 29)
カラー変換
- HEX
- #df3f32
- RGB
- rgb(223 63 50)
- HSL
- hsl(5 73% 54%)
- HWB
- hwb(5 20% 13%)
- OKLCH
- oklch(0.603 0.199 29)
- OKLab
- oklab(0.603 0.174 0.096)
- CIE Lab
- lab(52.03 61.87 45.69)
- LCH
- lch(52.03 76.91 36.4)
- CMYK
- cmyk(0% 72% 78% 13%)
ティント · シェード · トーン
ティント
- E55849
- EB6D5D
- F08171
- F49385
- F8A699
- FBB8AD
- FDCAC1
- FEDCD6
- FFEDEA
シェード
- C2352A
- A52C22
- 8A231B
- 6F1B14
- 56120D
- 3D0A07
- 270403
- 120101
- 020000
トーン
- D74A3C
- CF5446
- C65B4E
- BD6256
- B4695E
- AB6E65
- A1736C
- 977873
- 8C7C79
カラーハーモニー
補色 +180°
- DF3F32
Bacon Strips
- 0092A2
≈ Jaded
類似色 -30° +30°
- DF3F32
Bacon Strips
- D73B7E
≈ Pink Yarrow
- BE6800
≈ Camel Fur
トライアド +120° +240°
- DF3F32
Bacon Strips
- 009B42
≈ Green Revolution
- 5273F6
≈ Blue Öyster Cult
スプリットコンプリメンタリー +150° +210°
- DF3F32
Bacon Strips
- 009682
≈ Aqua Waters
- 008AC9
≈ Newport Blue
テトラード +90° +180° +270°
- DF3F32
Bacon Strips
- 798C00
≈ Canopy
- 0092A2
≈ Jaded
- 945DE5
≈ Lavender Indigo
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 4.29:1 · APCA Lc 68
Ag
AA黒の上
WCAG 4.89:1 · APCA Lc 33
最適な文字色: #000000
WCAG 4.89:1 (AA) · APCA Lc 33
Contrast pairs
コードスニペット
CSS
:root {
--bacon-strips: #df3f32;
--bacon-strips-rgb: 223 63 50;
--bacon-strips-oklch: oklch(0.603 0.199 29);
}
.element {
color: var(--bacon-strips);
background-color: hsl(5 73% 54%);
border-color: oklch(0.603 0.199 29);
}Tailwind CSS v4
@theme {
--color-bacon-strips: #df3f32;
--color-bacon-strips-50: #ffe1d3;
--color-bacon-strips-100: #ffd0c0;
--color-bacon-strips-200: #ffb3a0;
--color-bacon-strips-300: #ff8d77;
--color-bacon-strips-400: #fe6655;
--color-bacon-strips-500: #ed382b;
--color-bacon-strips-600: #c83227;
--color-bacon-strips-700: #a1281f;
--color-bacon-strips-800: #781a18;
--color-bacon-strips-900: #55110f;
--color-bacon-strips-950: #390203;
}SCSS
$bacon-strips: #df3f32;
$bacon-strips-rgb: 223, 63, 50;
$bacon-strips-light: mix(#fff, $bacon-strips, 20%);
$bacon-strips-dark: mix(#000, $bacon-strips, 20%);
.element {
color: $bacon-strips;
box-shadow: 0 0 0 2px rgba($bacon-strips, 0.35);
}