色名 · #F5DAAA
Caribbean Sunrise
Caribbean Sunriseは#F5DAAA：rgb(245 218 170)、hsl(38 79% 81%)、oklch(0.899 0.069 81.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Caribbean Sunrise color name →
#F5DAAA
oklch(0.899 0.069 81.8)
カラー変換
- HEX
- #f5daaa
- RGB
- rgb(245 218 170)
- HSL
- hsl(38 79% 81%)
- HWB
- hwb(38 67% 4%)
- OKLCH
- oklch(0.899 0.069 81.8)
- OKLab
- oklab(0.899 0.01 0.068)
- CIE Lab
- lab(88.45 4.57 27.31)
- LCH
- lch(88.45 27.69 80.5)
- CMYK
- cmyk(0% 11% 31% 4%)
ティント · シェード · トーン
ティント
- F6DEB3
- F7E2BB
- F8E5C4
- F9E9CC
- FAEDD5
- FBF0DD
- FCF4E6
- FDF8EE
- FEFBF7
シェード
- D5BD93
- B6A27D
- 988768
- 7B6C53
- 5F543F
- 443C2D
- 2B251B
- 15110B
- 030201
トーン
- E9D1A6
- DDC7A2
- D1BE9E
- C5B59A
- B9AC96
- ADA391
- A29A8D
- 969189
- 8B8984
カラーハーモニー
補色 +180°
- F5DAAA
Caribbean Sunrise
- CCDFFF
≈ Arc Light
類似色 -30° +30°
- F5DAAA
Caribbean Sunrise
- FFD3BA
≈ Peachy Bon-Bon
- DEE3AE
≈ Cocktail Onion
トライアド +120° +240°
- F5DAAA
Caribbean Sunrise
- A7ECF1
≈ Mint Macaron
- F4CFFA
≈ Sassy Pink
スプリットコンプリメンタリー +150° +210°
- F5DAAA
Caribbean Sunrise
- B7E6FF
≈ Frozen Landscape
- DED8FF
≈ Transparent Blue
テトラード +90° +180° +270°
- F5DAAA
Caribbean Sunrise
- AFEDD8
≈ Faint Clover
- CCDFFF
≈ Arc Light
- FFCEE2
≈ Linnet Egg Red
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.35:1 · APCA Lc 17
Ag
AAA黒の上
WCAG 15.49:1 · APCA Lc 86
最適な文字色: #000000
WCAG 15.49:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
CSS
:root {
--caribbean-sunrise: #f5daaa;
--caribbean-sunrise-rgb: 245 218 170;
--caribbean-sunrise-oklch: oklch(0.899 0.069 81.8);
}
.element {
color: var(--caribbean-sunrise);
background-color: hsl(38 79% 81%);
border-color: oklch(0.899 0.069 81.8);
}Tailwind CSS v4
@theme {
--color-caribbean-sunrise: #f5daaa;
--color-caribbean-sunrise-50: #fff4df;
--color-caribbean-sunrise-100: #f3e6ce;
--color-caribbean-sunrise-200: #e2d2b3;
--color-caribbean-sunrise-300: #c8b58f;
--color-caribbean-sunrise-400: #b39b6f;
--color-caribbean-sunrise-500: #9d824f;
--color-caribbean-sunrise-600: #856e44;
--color-caribbean-sunrise-700: #6a5836;
--color-caribbean-sunrise-800: #4f4026;
--color-caribbean-sunrise-900: #372c19;
--color-caribbean-sunrise-950: #22190a;
}SCSS
$caribbean-sunrise: #f5daaa;
$caribbean-sunrise-rgb: 245, 218, 170;
$caribbean-sunrise-light: mix(#fff, $caribbean-sunrise, 20%);
$caribbean-sunrise-dark: mix(#000, $caribbean-sunrise, 20%);
.element {
color: $caribbean-sunrise;
box-shadow: 0 0 0 2px rgba($caribbean-sunrise, 0.35);
}