色名 · #F07427
Vivid Tangelo
Vivid Tangeloは#F07427：rgb(240 116 39)、hsl(23 87% 55%)、oklch(0.694 0.174 47.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Vivid Tangelo color name →
#F07427
oklch(0.694 0.174 47.5)
カラー変換
- HEX
- #f07427
- RGB
- rgb(240 116 39)
- HSL
- hsl(23 87% 55%)
- HWB
- hwb(23 15% 6%)
- OKLCH
- oklch(0.694 0.174 47.5)
- OKLab
- oklab(0.694 0.117 0.128)
- CIE Lab
- lab(63.37 45.76 61.8)
- LCH
- lch(63.37 76.9 53.5)
- CMYK
- cmyk(0% 52% 84% 6%)
ティント · シェード · トーン
ティント
- F38345
- F6925D
- F9A073
- FBAE88
- FDBC9C
- FECAB0
- FFD7C4
- FFE4D7
- FFF2EB
シェード
- D16420
- B2541A
- 954514
- 78370E
- 5D2908
- 431B04
- 2A0F02
- 140501
- 030100
トーン
- E57737
- DB7944
- D07B4E
- C57D57
- BA7E5F
- AF7F67
- A47F6E
- 988074
- 8C807A
カラーハーモニー
補色 +180°
- F07427
Vivid Tangelo
- 00ACDD
≈ Blue Fire
類似色 -30° +30°
- F07427
Vivid Tangelo
- F56774
≈ Sugar Coral
- CE8F00
≈ End of Summer
トライアド +120° +240°
- F07427
Vivid Tangelo
- 00B88B
≈ Green Velour
- 9988FF
≈ Lavender Blue Shadow
スプリットコンプリメンタリー +150° +210°
- F07427
Vivid Tangelo
- 00B3B6
≈ Cyan Sky
- 579CFF
≈ Blue Chaos
テトラード +90° +180° +270°
- F07427
Vivid Tangelo
- 62B43E
≈ Sour Candy
- 00ACDD
≈ Blue Fire
- C875E2
≈ Fake Love
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.90:1 · APCA Lc 55
Ag
AAA黒の上
WCAG 7.23:1 · APCA Lc 47
最適な文字色: #000000
WCAG 7.23:1 (AAA) · APCA Lc 47
Contrast pairs
コードスニペット
CSS
:root {
--vivid-tangelo: #f07427;
--vivid-tangelo-rgb: 240 116 39;
--vivid-tangelo-oklch: oklch(0.694 0.174 47.5);
}
.element {
color: var(--vivid-tangelo);
background-color: hsl(23 87% 55%);
border-color: oklch(0.694 0.174 47.5);
}Tailwind CSS v4
@theme {
--color-vivid-tangelo: #f07427;
--color-vivid-tangelo-50: #ffe7c9;
--color-vivid-tangelo-100: #ffd8b4;
--color-vivid-tangelo-200: #ffbe91;
--color-vivid-tangelo-300: #fe9b62;
--color-vivid-tangelo-400: #ee7934;
--color-vivid-tangelo-500: #dd5500;
--color-vivid-tangelo-600: #ba4900;
--color-vivid-tangelo-700: #963b00;
--color-vivid-tangelo-800: #702900;
--color-vivid-tangelo-900: #4f1b00;
--color-vivid-tangelo-950: #340b00;
}SCSS
$vivid-tangelo: #f07427;
$vivid-tangelo-rgb: 240, 116, 39;
$vivid-tangelo-light: mix(#fff, $vivid-tangelo, 20%);
$vivid-tangelo-dark: mix(#000, $vivid-tangelo, 20%);
.element {
color: $vivid-tangelo;
box-shadow: 0 0 0 2px rgba($vivid-tangelo, 0.35);
}