最も近い色名 · #F17838
#F17838
最も近い色名: Orange Crush
#F17838（rgb(241 120 56)、hsl(21 87% 58%)、oklch(0.703 0.167 45.8)）に最も近い色名はOrange Crushです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
#F17838
oklch(0.703 0.167 45.8)
カラー変換
- HEX
- #f17838
- RGB
- rgb(241 120 56)
- HSL
- hsl(21 87% 58%)
- HWB
- hwb(21 22% 5%)
- OKLCH
- oklch(0.703 0.167 45.8)
- OKLab
- oklab(0.703 0.117 0.12)
- CIE Lab
- lab(64.38 44.64 55.71)
- LCH
- lch(64.38 71.39 51.3)
- CMYK
- cmyk(0% 50% 77% 5%)
ティント · シェード · トーン
ティント
- F48750
- F79566
- F9A37A
- FCB08D
- FDBEA1
- FECBB3
- FFD8C6
- FFE5D9
- FFF2EC
シェード
- D2672F
- B35727
- 95481F
- 793917
- 5D2A0F
- 431D08
- 2B1004
- 140501
- 030100
トーン
- E67A44
- DB7C4D
- D17D56
- C67F5D
- BA7F64
- AF806A
- A48070
- 988076
- 8C807B
カラーハーモニー
補色 +180°
- F17838
Orange Crush
- 00AFDE
≈ Blue Atoll
類似色 -30° +30°
- F17838
Orange Crush
- F56D7C
≈ Strawberry Pink
- D39000
≈ Harvest Eve Gold
トライアド +120° +240°
- F17838
Orange Crush
- 00BB8A
≈ Slime Girl
- 988DFF
≈ Lavender Blue Shadow
スプリットコンプリメンタリー +150° +210°
- F17838
Orange Crush
- 00B6B7
≈ Cyan Sky
- 57A0FF
≈ Blue Chaos
テトラード +90° +180° +270°
- F17838
Orange Crush
- 6DB642
≈ Pure Apple
- 00AFDE
≈ Blue Atoll
- C77BE5
≈ Fake Love
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.80:1 · APCA Lc 53
Ag
AAA黒の上
WCAG 7.48:1 · APCA Lc 48
最適な文字色: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
コードスニペット
CSS
:root {
--orange-crush: #f17838;
--orange-crush-rgb: 241 120 56;
--orange-crush-oklch: oklch(0.703 0.167 45.8);
}
.element {
color: var(--orange-crush);
background-color: hsl(21 87% 58%);
border-color: oklch(0.703 0.167 45.8);
}Tailwind CSS v4
@theme {
--color-orange-crush: #f17838;
--color-orange-crush-50: #ffe8cc;
--color-orange-crush-100: #ffd8b8;
--color-orange-crush-200: #ffbf95;
--color-orange-crush-300: #fc9b69;
--color-orange-crush-400: #ec7a3f;
--color-orange-crush-500: #db5700;
--color-orange-crush-600: #b94b00;
--color-orange-crush-700: #943c00;
--color-orange-crush-800: #6f2a03;
--color-orange-crush-900: #4e1c03;
--color-orange-crush-950: #340b00;
}SCSS
$orange-crush: #f17838;
$orange-crush-rgb: 241, 120, 56;
$orange-crush-light: mix(#fff, $orange-crush, 20%);
$orange-crush-dark: mix(#000, $orange-crush, 20%);
.element {
color: $orange-crush;
box-shadow: 0 0 0 2px rgba($orange-crush, 0.35);
}