色名 · #F7A58B
Lugganath Orange
Lugganath Orangeは#F7A58B：rgb(247 165 139)、hsl(14 87% 76%)、oklch(0.796 0.104 38.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Lugganath Orange color name →
#F7A58B
oklch(0.796 0.104 38.3)
カラー変換
- HEX
- #f7a58b
- RGB
- rgb(247 165 139)
- HSL
- hsl(14 87% 76%)
- HWB
- hwb(14 55% 3%)
- OKLCH
- oklch(0.796 0.104 38.3)
- OKLab
- oklab(0.796 0.082 0.065)
- CIE Lab
- lab(75.6 29.05 26.55)
- LCH
- lch(75.6 39.36 42.4)
- CMYK
- cmyk(0% 33% 44% 3%)
ティント · シェード · トーン
ティント
- F9AE97
- FAB7A2
- FBC0AE
- FDC9B9
- FDD2C5
- FEDBD0
- FFE4DC
- FFEDE8
- FFF6F3
シェード
- D78F78
- B77966
- 996554
- 7C5143
- 603D32
- 452B23
- 2C1A14
- 150A07
- 030101
トーン
- EBA28A
- DF9E89
- D39B89
- C79788
- BB9386
- B08F85
- A48C84
- 988883
- 8C8481
カラーハーモニー
補色 +180°
- F7A58B
Lugganath Orange
- 64CDE9
≈ Hawaiian Breeze
類似色 -30° +30°
- F7A58B
Lugganath Orange
- F7A0AF
≈ Ballet Slippers
- E9B071
≈ Evening Sunset
トライアド +120° +240°
- F7A58B
Lugganath Orange
- 7FD1A3
≈ Crystal Gem
- ADB6FF
≈ Greyish Lavender
スプリットコンプリメンタリー +150° +210°
- F7A58B
Lugganath Orange
- 60D2C9
≈ Hidden Sea Glass
- 86C2FD
≈ Maya Blue
テトラード +90° +180° +270°
- F7A58B
Lugganath Orange
- A9CA80
≈ Wonder Woods
- 64CDE9
≈ Hawaiian Breeze
- CFAAF0
≈ Teasel Dipsacus
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.96:1 · APCA Lc 38
Ag
AAA黒の上
WCAG 10.70:1 · APCA Lc 65
最適な文字色: #000000
WCAG 10.70:1 (AAA) · APCA Lc 65
Contrast pairs
コードスニペット
CSS
:root {
--lugganath-orange: #f7a58b;
--lugganath-orange-rgb: 247 165 139;
--lugganath-orange-oklch: oklch(0.796 0.104 38.3);
}
.element {
color: var(--lugganath-orange);
background-color: hsl(14 87% 76%);
border-color: oklch(0.796 0.104 38.3);
}Tailwind CSS v4
@theme {
--color-lugganath-orange: #f7a58b;
--color-lugganath-orange-50: #ffecdf;
--color-lugganath-orange-100: #ffddce;
--color-lugganath-orange-200: #fcc6b3;
--color-lugganath-orange-300: #e6a68f;
--color-lugganath-orange-400: #d48871;
--color-lugganath-orange-500: #c06c51;
--color-lugganath-orange-600: #a25c45;
--color-lugganath-orange-700: #824937;
--color-lugganath-orange-800: #613428;
--color-lugganath-orange-900: #44241b;
--color-lugganath-orange-950: #2c120b;
}SCSS
$lugganath-orange: #f7a58b;
$lugganath-orange-rgb: 247, 165, 139;
$lugganath-orange-light: mix(#fff, $lugganath-orange, 20%);
$lugganath-orange-dark: mix(#000, $lugganath-orange, 20%);
.element {
color: $lugganath-orange;
box-shadow: 0 0 0 2px rgba($lugganath-orange, 0.35);
}