色名 · #FF8D25
Monarch Wing
Monarch Wingは#FF8D25：rgb(255 141 37)、hsl(29 100% 57%)、oklch(0.753 0.173 56.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Monarch Wing color name →
#FF8D25
oklch(0.753 0.173 56.1)
カラー変換
- HEX
- #ff8d25
- RGB
- rgb(255 141 37)
- HSL
- hsl(29 100% 57%)
- HWB
- hwb(29 15% 0%)
- OKLCH
- oklch(0.753 0.173 56.1)
- OKLab
- oklab(0.753 0.096 0.143)
- CIE Lab
- lab(70.49 39.64 69.03)
- LCH
- lch(70.49 79.6 60.1)
- CMYK
- cmyk(0% 45% 85% 0%)
ティント · シェード · トーン
ティント
- FF9947
- FFA660
- FFB177
- FFBD8B
- FFC89F
- FFD3B3
- FFDEC6
- FFE9D9
- FFF4EC
シェード
- DE7A1F
- BE6719
- 9E5513
- 80440D
- 633308
- 482304
- 2E1402
- 160700
- 030100
トーン
- F38D38
- E68C46
- DA8B51
- CD8B5A
- C08962
- B48869
- A78670
- 9A8476
- 8D827B
カラーハーモニー
補色 +180°
- FF8D25
Monarch Wing
- 35BCFF
≈ Megaman
類似色 -30° +30°
- FF8D25
Monarch Wing
- FF867C
≈ Orange Tea Rose
- DAA600
≈ Golden Beryl Yellow
トライアド +120° +240°
- FF8D25
Monarch Wing
- 00CBAC
≈ Mint Leaf
- B89AFF
≈ Baby Purple
スプリットコンプリメンタリー +150° +210°
- FF8D25
Monarch Wing
- 00C5D7
≈ The Crowd Roars!
- 8AACFF
≈ Kitten’s Eye
テトラード +90° +180° +270°
- FF8D25
Monarch Wing
- 59CB68
≈ UFO Green
- 35BCFF
≈ Megaman
- E684E9
≈ Lavender Magenta
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.31:1 · APCA Lc 45
Ag
AAA黒の上
WCAG 9.08:1 · APCA Lc 57
最適な文字色: #000000
WCAG 9.08:1 (AAA) · APCA Lc 57
Contrast pairs
コードスニペット
CSS
:root {
--monarch-wing: #ff8d25;
--monarch-wing-rgb: 255 141 37;
--monarch-wing-oklch: oklch(0.753 0.173 56.1);
}
.element {
color: var(--monarch-wing);
background-color: hsl(29 100% 57%);
border-color: oklch(0.753 0.173 56.1);
}Tailwind CSS v4
@theme {
--color-monarch-wing: #ff8d25;
--color-monarch-wing-50: #ffeac5;
--color-monarch-wing-100: #ffdaaf;
--color-monarch-wing-200: #ffc289;
--color-monarch-wing-300: #f99f56;
--color-monarch-wing-400: #e97e19;
--color-monarch-wing-500: #d75d00;
--color-monarch-wing-600: #b65000;
--color-monarch-wing-700: #924000;
--color-monarch-wing-800: #6e2c00;
--color-monarch-wing-900: #4d1e00;
--color-monarch-wing-950: #330d00;
}SCSS
$monarch-wing: #ff8d25;
$monarch-wing-rgb: 255, 141, 37;
$monarch-wing-light: mix(#fff, $monarch-wing, 20%);
$monarch-wing-dark: mix(#000, $monarch-wing, 20%);
.element {
color: $monarch-wing;
box-shadow: 0 0 0 2px rgba($monarch-wing, 0.35);
}