色名 · #F8E87B
Pineapple Juice
Pineapple Juiceは#F8E87B：rgb(248 232 123)、hsl(52 90% 73%)、oklch(0.922 0.131 101.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Pineapple Juice color name →
#F8E87B
oklch(0.922 0.131 101.1)
カラー変換
- HEX
- #f8e87b
- RGB
- rgb(248 232 123)
- HSL
- hsl(52 90% 73%)
- HWB
- hwb(52 48% 3%)
- OKLCH
- oklch(0.922 0.131 101.1)
- OKLab
- oklab(0.922 -0.025 0.129)
- CIE Lab
- lab(91.66 -4.53 54.43)
- LCH
- lch(91.66 54.62 94.8)
- CMYK
- cmyk(0% 6% 50% 3%)
ティント · シェード · トーン
ティント
- F9EB8B
- F9ED99
- FAF0A7
- FAF2B5
- FBF4C2
- FCF7CE
- FDF9DB
- FDFBE7
- FEFDF3
シェード
- D8CA6A
- B8AC5A
- 9A904A
- 7C743A
- 60592C
- 45401E
- 2C2910
- 151305
- 030301
トーン
- EBDD7E
- DFD380
- D2C881
- C6BE82
- BAB383
- AEA983
- A29F83
- 979482
- 8B8A81
カラーハーモニー
補色 +180°
- F8E87B
Pineapple Juice
- E0E3FF
≈ Stoic White
類似色 -30° +30°
- F8E87B
Pineapple Juice
- FFDFBB
≈ Liveliness
- C6F899
≈ Menthol
トライアド +120° +240°
- F8E87B
Pineapple Juice
- BEEEFF
≈ Ice Effect
- FFD8F0
≈ Sweet Sachet
スプリットコンプリメンタリー +150° +210°
- F8E87B
Pineapple Juice
- D3E8FF
≈ Veiling Waterfalls
- F0DCFF
≈ Lavender Savour
テトラード +90° +180° +270°
- F8E87B
Pineapple Juice
- 75FFF8
≈ Aggressive Baby Blue
- E0E3FF
≈ Stoic White
- FFDBDE
≈ Strawberry Blonde
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.24:1 · APCA Lc 12
Ag
AAA黒の上
WCAG 16.81:1 · APCA Lc 92
最適な文字色: #000000
WCAG 16.81:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--pineapple-juice: #f8e87b;
--pineapple-juice-rgb: 248 232 123;
--pineapple-juice-oklch: oklch(0.922 0.131 101.1);
}
.element {
color: var(--pineapple-juice);
background-color: hsl(52 90% 73%);
border-color: oklch(0.922 0.131 101.1);
}Tailwind CSS v4
@theme {
--color-pineapple-juice: #f8e87b;
--color-pineapple-juice-50: #fbf8cc;
--color-pineapple-juice-100: #efebb8;
--color-pineapple-juice-200: #ded795;
--color-pineapple-juice-300: #c3ba68;
--color-pineapple-juice-400: #afa036;
--color-pineapple-juice-500: #9a8700;
--color-pineapple-juice-600: #827200;
--color-pineapple-juice-700: #685c00;
--color-pineapple-juice-800: #4e4200;
--color-pineapple-juice-900: #362e00;
--color-pineapple-juice-950: #211a00;
}SCSS
$pineapple-juice: #f8e87b;
$pineapple-juice-rgb: 248, 232, 123;
$pineapple-juice-light: mix(#fff, $pineapple-juice, 20%);
$pineapple-juice-dark: mix(#000, $pineapple-juice, 20%);
.element {
color: $pineapple-juice;
box-shadow: 0 0 0 2px rgba($pineapple-juice, 0.35);
}