色名 · #DF6124
Vivid Red Tangelo
Vivid Red Tangeloは#DF6124：rgb(223 97 36)、hsl(20 75% 51%)、oklch(0.642 0.172 42.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Vivid Red Tangelo color name →
#DF6124
oklch(0.642 0.172 42.9)
カラー変換
- HEX
- #df6124
- RGB
- rgb(223 97 36)
- HSL
- hsl(20 75% 51%)
- HWB
- hwb(20 14% 13%)
- OKLCH
- oklch(0.642 0.172 42.9)
- OKLab
- oklab(0.642 0.126 0.117)
- CIE Lab
- lab(57.17 48.06 56.75)
- LCH
- lch(57.17 74.37 49.7)
- CMYK
- cmyk(0% 57% 84% 13%)
ティント · シェード · トーン
ティント
- E47341
- E98359
- EE936E
- F2A383
- F5B398
- F8C2AC
- FBD1C1
- FDE1D5
- FEF0EA
シェード
- C2531E
- A54618
- 8A3912
- 6F2D0C
- 562107
- 3D1504
- 270B02
- 120300
- 020000
トーン
- D66634
- CE6A40
- C56E4A
- BC7253
- B3755C
- A97864
- 9F7A6B
- 957C72
- 8B7E79
カラーハーモニー
補色 +180°
- DF6124
Vivid Red Tangelo
- 009CC1
≈ Sea Wonder
類似色 -30° +30°
- DF6124
Vivid Red Tangelo
- E1576F
≈ Kōbai Red
- BE7D00
≈ Guo Tie Dumpling
トライアド +120° +240°
- DF6124
Vivid Red Tangelo
- 00A674
≈ Bluish Green
- 817AF1
≈ Hera Blue
スプリットコンプリメンタリー +150° +210°
- DF6124
Vivid Red Tangelo
- 00A19F
≈ Aqua Velvet
- 2D8EF1
≈ Bleu de France
テトラード +90° +180° +270°
- DF6124
Vivid Red Tangelo
- 61A118
≈ Elven Olympics
- 009CC1
≈ Sea Wonder
- B068D6
≈ Teldrassil Purple
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.57:1 · APCA Lc 63
Ag
AA黒の上
WCAG 5.87:1 · APCA Lc 39
最適な文字色: #000000
WCAG 5.87:1 (AA) · APCA Lc 39
Contrast pairs
コードスニペット
CSS
:root {
--vivid-red-tangelo: #df6124;
--vivid-red-tangelo-rgb: 223 97 36;
--vivid-red-tangelo-oklch: oklch(0.642 0.172 42.9);
}
.element {
color: var(--vivid-red-tangelo);
background-color: hsl(20 75% 51%);
border-color: oklch(0.642 0.172 42.9);
}Tailwind CSS v4
@theme {
--color-vivid-red-tangelo: #df6124;
--color-vivid-red-tangelo-50: #ffe6cd;
--color-vivid-red-tangelo-100: #ffd6b9;
--color-vivid-red-tangelo-200: #ffbd96;
--color-vivid-red-tangelo-300: #ff996a;
--color-vivid-red-tangelo-400: #f07741;
--color-vivid-red-tangelo-500: #de5300;
--color-vivid-red-tangelo-600: #bc4700;
--color-vivid-red-tangelo-700: #973903;
--color-vivid-red-tangelo-800: #712705;
--color-vivid-red-tangelo-900: #501a04;
--color-vivid-red-tangelo-950: #350a00;
}SCSS
$vivid-red-tangelo: #df6124;
$vivid-red-tangelo-rgb: 223, 97, 36;
$vivid-red-tangelo-light: mix(#fff, $vivid-red-tangelo, 20%);
$vivid-red-tangelo-dark: mix(#000, $vivid-red-tangelo, 20%);
.element {
color: $vivid-red-tangelo;
box-shadow: 0 0 0 2px rgba($vivid-red-tangelo, 0.35);
}