色名 · #FF7A00
Heat Wave
Heat Waveは#FF7A00：rgb(255 122 0)、hsl(29 100% 50%)、oklch(0.723 0.19 50.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Heat Wave color name →
#FF7A00
oklch(0.723 0.19 50.5)
カラー変換
- HEX
- #ff7a00
- RGB
- rgb(255 122 0)
- HSL
- hsl(29 100% 50%)
- HWB
- hwb(29 0% 0%)
- OKLCH
- oklch(0.723 0.19 50.5)
- OKLab
- oklab(0.723 0.121 0.146)
- CIE Lab
- lab(66.67 48.27 74.27)
- LCH
- lch(66.67 88.58 57)
- CMYK
- cmyk(0% 52% 100% 0%)
ティント · シェード · トーン
ティント
- FF8939
- FF9755
- FFA56E
- FFB384
- FFC099
- FFCDAE
- FFDAC2
- FFE6D6
- FFF3EB
シェード
- DE6900
- BE5900
- 9E4900
- 803A00
- 632B00
- 481D00
- 2E1000
- 160500
- 030100
トーン
- F37C28
- E77E3A
- DA8048
- CE8153
- C1815C
- B58265
- A8826C
- 9B8173
- 8E817A
カラーハーモニー
補色 +180°
- FF7A00
Heat Wave
- 00B4EF
≈ Lynx Screen Blue
類似色 -30° +30°
- FF7A00
Heat Wave
- FF7276
≈ Salmon Rose
- D59900
≈ Leopard
トライアド +120° +240°
- FF7A00
Heat Wave
- 00C299
≈ Blarney
- A692FF
≈ Cobalite
スプリットコンプリメンタリー +150° +210°
- FF7A00
Heat Wave
- 00BCC4
≈ Panorama Blue
- 70A5FF
≈ Fennel Flower
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.61:1 · APCA Lc 50
Ag
AAA黒の上
WCAG 8.03:1 · APCA Lc 52
最適な文字色: #000000
WCAG 8.03:1 (AAA) · APCA Lc 52
Contrast pairs
コードスニペット
CSS
:root {
--heat-wave: #ff7a00;
--heat-wave-rgb: 255 122 0;
--heat-wave-oklch: oklch(0.723 0.19 50.5);
}
.element {
color: var(--heat-wave);
background-color: hsl(29 100% 50%);
border-color: oklch(0.723 0.19 50.5);
}Tailwind CSS v4
@theme {
--color-heat-wave: #ff7a00;
--color-heat-wave-50: #ffe7c3;
--color-heat-wave-100: #ffd7ad;
--color-heat-wave-200: #ffbd86;
--color-heat-wave-300: #ff9952;
--color-heat-wave-400: #f3760e;
--color-heat-wave-500: #e25000;
--color-heat-wave-600: #bf4500;
--color-heat-wave-700: #993700;
--color-heat-wave-800: #732600;
--color-heat-wave-900: #511a00;
--color-heat-wave-950: #360900;
}SCSS
$heat-wave: #ff7a00;
$heat-wave-rgb: 255, 122, 0;
$heat-wave-light: mix(#fff, $heat-wave, 20%);
$heat-wave-dark: mix(#000, $heat-wave, 20%);
.element {
color: $heat-wave;
box-shadow: 0 0 0 2px rgba($heat-wave, 0.35);
}