色名 · #F1CC2B
Golden Dream
Golden Dreamは#F1CC2B：rgb(241 204 43)、hsl(49 88% 56%)、oklch(0.853 0.166 94.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Golden Dream color name →
#F1CC2B
oklch(0.853 0.166 94.8)
カラー変換
- HEX
- #f1cc2b
- RGB
- rgb(241 204 43)
- HSL
- hsl(49 88% 56%)
- HWB
- hwb(49 17% 5%)
- OKLCH
- oklch(0.853 0.166 94.8)
- OKLab
- oklab(0.853 -0.014 0.165)
- CIE Lab
- lab(83.45 2.81 76.57)
- LCH
- lch(83.45 76.62 87.9)
- CMYK
- cmyk(0% 15% 82% 5%)
ティント · シェード · トーン
ティント
- F2D250
- F4D76A
- F5DC80
- F7E294
- F8E7A7
- F9ECBA
- FBF1CB
- FCF6DD
- FEFAEE
シェード
- D2B124
- B3971D
- 957E16
- 796510
- 5D4E0A
- 433705
- 2B2202
- 140F01
- 030200
トーン
- E5C440
- D9BD4E
- CEB559
- C2AE62
- B7A669
- AC9F6F
- A09774
- 958F79
- 8B887D
カラーハーモニー
補色 +180°
- F1CC2B
Golden Dream
- C0CCFF
≈ Light Periwinkle
類似色 -30° +30°
- F1CC2B
Golden Dream
- FFC083
≈ Buttery
- B6E15D
≈ Queen of Gardens
トライアド +120° +240°
- F1CC2B
Golden Dream
- 61E2FF
≈ Athena Blue
- FFB1EE
≈ Pink Apotheosis
スプリットコンプリメンタリー +150° +210°
- F1CC2B
Golden Dream
- A4D5FF
≈ Malmö FF
- DCC0FF
≈ Jane Purple
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.56:1 · APCA Lc 26
Ag
AAA黒の上
WCAG 13.41:1 · APCA Lc 77
最適な文字色: #000000
WCAG 13.41:1 (AAA) · APCA Lc 77
Contrast pairs
コードスニペット
CSS
:root {
--golden-dream: #f1cc2b;
--golden-dream-rgb: 241 204 43;
--golden-dream-oklch: oklch(0.853 0.166 94.8);
}
.element {
color: var(--golden-dream);
background-color: hsl(49 88% 56%);
border-color: oklch(0.853 0.166 94.8);
}Tailwind CSS v4
@theme {
--color-golden-dream: #f1cc2b;
--color-golden-dream-50: #fff6c0;
--color-golden-dream-100: #f7e9a9;
--color-golden-dream-200: #e8d580;
--color-golden-dream-300: #d0b747;
--color-golden-dream-400: #be9b00;
--color-golden-dream-500: #a98100;
--color-golden-dream-600: #8f6d00;
--color-golden-dream-700: #735700;
--color-golden-dream-800: #563f00;
--color-golden-dream-900: #3c2b00;
--color-golden-dream-950: #261800;
}SCSS
$golden-dream: #f1cc2b;
$golden-dream-rgb: 241, 204, 43;
$golden-dream-light: mix(#fff, $golden-dream, 20%);
$golden-dream-dark: mix(#000, $golden-dream, 20%);
.element {
color: $golden-dream;
box-shadow: 0 0 0 2px rgba($golden-dream, 0.35);
}