色名 · #FFC39E
Coral Gable
Coral Gableは#FFC39E：rgb(255 195 158)、hsl(23 100% 81%)、oklch(0.862 0.085 52.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Coral Gable color name →
#FFC39E
oklch(0.862 0.085 52.9)
カラー変換
- HEX
- #ffc39e
- RGB
- rgb(255 195 158)
- HSL
- hsl(23 100% 81%)
- HWB
- hwb(23 62% 0%)
- OKLCH
- oklch(0.862 0.085 52.9)
- OKLab
- oklab(0.862 0.051 0.068)
- CIE Lab
- lab(83.68 18.69 27.37)
- LCH
- lch(83.68 33.15 55.7)
- CMYK
- cmyk(0% 24% 38% 0%)
ティント · シェード · トーン
ティント
- FFC9A8
- FFCFB2
- FFD5BB
- FFDBC5
- FFE1CF
- FFE7D8
- FFEDE2
- FFF3EC
- FFF9F5
シェード
- DEA989
- BE9074
- 9E7860
- 80604D
- 634A3A
- 483429
- 2E2018
- 160E09
- 030201
トーン
- F2BC9B
- E5B599
- D8AF96
- CBA893
- BEA190
- B29B8D
- A5948A
- 998D87
- 8C8783
カラーハーモニー
補色 +180°
- FFC39E
Coral Gable
- 9BDCFF
≈ Columbia Blue
類似色 -30° +30°
- FFC39E
Coral Gable
- FFBFBB
≈ Peach Scone
- EDCD91
≈ Sunlight
トライアド +120° +240°
- FFC39E
Coral Gable
- 96E4CC
≈ Aqua Wish
- D3C9FF
≈ Innocent Snowdrop
スプリットコンプリメンタリー +150° +210°
- FFC39E
Coral Gable
- 8BE3EA
≈ Aqua Fiesta
- BBD2FF
≈ Ice Cold Stare
テトラード +90° +180° +270°
- FFC39E
Coral Gable
- B2E1AE
≈ Celadon
- 9BDCFF
≈ Columbia Blue
- EDC0F3
≈ Purple’s Baby Sister
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.54:1 · APCA Lc 25
Ag
AAA黒の上
WCAG 13.55:1 · APCA Lc 78
最適な文字色: #000000
WCAG 13.55:1 (AAA) · APCA Lc 78
Contrast pairs
コードスニペット
CSS
:root {
--coral-gable: #ffc39e;
--coral-gable-rgb: 255 195 158;
--coral-gable-oklch: oklch(0.862 0.085 52.9);
}
.element {
color: var(--coral-gable);
background-color: hsl(23 100% 81%);
border-color: oklch(0.862 0.085 52.9);
}Tailwind CSS v4
@theme {
--color-coral-gable: #ffc39e;
--color-coral-gable-50: #ffefdf;
--color-coral-gable-100: #ffe1ce;
--color-coral-gable-200: #f2cbb2;
--color-coral-gable-300: #daac8e;
--color-coral-gable-400: #c7916f;
--color-coral-gable-500: #b2764f;
--color-coral-gable-600: #976444;
--color-coral-gable-700: #795036;
--color-coral-gable-800: #5a3a27;
--color-coral-gable-900: #3f271a;
--color-coral-gable-950: #28150a;
}SCSS
$coral-gable: #ffc39e;
$coral-gable-rgb: 255, 195, 158;
$coral-gable-light: mix(#fff, $coral-gable, 20%);
$coral-gable-dark: mix(#000, $coral-gable, 20%);
.element {
color: $coral-gable;
box-shadow: 0 0 0 2px rgba($coral-gable, 0.35);
}