色名 · #B30D0D
Thick Red
Thick Redは#B30D0D：rgb(179 13 13)、hsl(0 86% 38%)、oklch(0.486 0.193 28.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Thick Red color name →
#B30D0D
oklch(0.486 0.193 28.5)
カラー変換
- HEX
- #b30d0d
- RGB
- rgb(179 13 13)
- HSL
- hsl(0 86% 38%)
- HWB
- hwb(0 5% 30%)
- OKLCH
- oklch(0.486 0.193 28.5)
- OKLab
- oklab(0.486 0.17 0.092)
- CIE Lab
- lab(38.45 60.62 48.65)
- LCH
- lch(38.45 77.73 38.7)
- CMYK
- cmyk(0% 93% 93% 30%)
ティント · シェード · トーン
ティント
- BE372D
- C85145
- D2685C
- DA7F72
- E29489
- EAAAA0
- F0BFB7
- F6D4CF
- FBEAE7
シェード
- 9B0A0A
- 840707
- 6E0505
- 580303
- 430202
- 2F0101
- 1D0000
- 0C0000
- 010000
トーン
- B02820
- AD382E
- A94439
- A54F44
- A0584F
- 9B6159
- 956963
- 8F716D
- 887976
カラーハーモニー
補色 +180°
- B30D0D
Thick Red
- 006C78
≈ Toadstool Teal
類似色 -30° +30°
- B30D0D
Thick Red
- AC0A5E
≈ Plum Paradise
- 8E4C00
≈ Parasite Brown
トライアド +120° +240°
- B30D0D
Thick Red
- 00732D
≈ Clear Green
- 344FCA
≈ New Car
スプリットコンプリメンタリー +150° +210°
- B30D0D
Thick Red
- 006F60
≈ Falcon Turquoise
- 006695
≈ Peacock Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.04:1 · APCA Lc 82
Ag
Fail黒の上
WCAG 2.98:1 · APCA Lc 20
最適な文字色: #FFFFFF
WCAG 7.04:1 (AAA) · APCA Lc 82
Contrast pairs
コードスニペット
CSS
:root {
--thick-red: #b30d0d;
--thick-red-rgb: 179 13 13;
--thick-red-oklch: oklch(0.486 0.193 28.5);
}
.element {
color: var(--thick-red);
background-color: hsl(0 86% 38%);
border-color: oklch(0.486 0.193 28.5);
}Tailwind CSS v4
@theme {
--color-thick-red: #b30d0d;
--color-thick-red-50: #ffe1d4;
--color-thick-red-100: #ffd0c1;
--color-thick-red-200: #ffb4a2;
--color-thick-red-300: #ff8e7a;
--color-thick-red-400: #fc6859;
--color-thick-red-500: #eb3c31;
--color-thick-red-600: #c6352b;
--color-thick-red-700: #9f2b22;
--color-thick-red-800: #771c1a;
--color-thick-red-900: #541311;
--color-thick-red-950: #380304;
}SCSS
$thick-red: #b30d0d;
$thick-red-rgb: 179, 13, 13;
$thick-red-light: mix(#fff, $thick-red, 20%);
$thick-red-dark: mix(#000, $thick-red, 20%);
.element {
color: $thick-red;
box-shadow: 0 0 0 2px rgba($thick-red, 0.35);
}