色名 · #C8BA63
Baby Frog
Baby Frogは#C8BA63：rgb(200 186 99)、hsl(52 48% 59%)、oklch(0.782 0.11 100.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Baby Frog color name →
#C8BA63
oklch(0.782 0.11 100.3)
カラー変換
- HEX
- #c8ba63
- RGB
- rgb(200 186 99)
- HSL
- hsl(52 48% 59%)
- HWB
- hwb(52 39% 22%)
- OKLCH
- oklch(0.782 0.11 100.3)
- OKLab
- oklab(0.782 -0.02 0.108)
- CIE Lab
- lab(75.33 -3.32 45.49)
- LCH
- lch(75.33 45.61 94.2)
- CMYK
- cmyk(0% 7% 51% 22%)
ティント · シェード · トーン
ティント
- CDC174
- D3C885
- D8CF94
- DDD6A4
- E3DDB3
- E8E4C3
- EEEAD2
- F4F1E1
- F9F8F0
シェード
- AEA155
- 948947
- 7B723A
- 635C2E
- 4C4621
- 363216
- 211E0B
- 0F0D03
- 020200
トーン
- C0B468
- B9AE6C
- B2A970
- AAA373
- A39D76
- 9C9778
- 95917B
- 8E8C7D
- 87867E
カラーハーモニー
補色 +180°
- C8BA63
Baby Frog
- ABB0FD
≈ Winterspring Lilac
類似色 -30° +30°
- C8BA63
Baby Frog
- E5AC66
≈ Gilt Trip
- A0C77B
≈ Frenzy Plant
トライアド +120° +240°
- C8BA63
Baby Frog
- 5AC8E9
≈ Candid Blue
- E89CCE
≈ Blossoms in Spring
スプリットコンプリメンタリー +150° +210°
- C8BA63
Baby Frog
- 81BDFC
≈ Scenic Water
- CEA4ED
≈ Bright Ube
テトラード +90° +180° +270°
- C8BA63
Baby Frog
- 52CEC8
≈ May Day
- ABB0FD
≈ Winterspring Lilac
- F59AA8
≈ Sweet 60
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.97:1 · APCA Lc 38
Ag
AAA黒の上
WCAG 10.65:1 · APCA Lc 64
最適な文字色: #000000
WCAG 10.65:1 (AAA) · APCA Lc 64
Contrast pairs
コードスニペット
CSS
:root {
--baby-frog: #c8ba63;
--baby-frog-rgb: 200 186 99;
--baby-frog-oklch: oklch(0.782 0.11 100.3);
}
.element {
color: var(--baby-frog);
background-color: hsl(52 48% 59%);
border-color: oklch(0.782 0.11 100.3);
}Tailwind CSS v4
@theme {
--color-baby-frog: #c8ba63;
--color-baby-frog-50: #fbf7d3;
--color-baby-frog-100: #eeeac0;
--color-baby-frog-200: #ddd7a0;
--color-baby-frog-300: #c2ba77;
--color-baby-frog-400: #ada04e;
--color-baby-frog-500: #97871b;
--color-baby-frog-600: #80721b;
--color-baby-frog-700: #665c16;
--color-baby-frog-800: #4c420c;
--color-baby-frog-900: #352e08;
--color-baby-frog-950: #201a00;
}SCSS
$baby-frog: #c8ba63;
$baby-frog-rgb: 200, 186, 99;
$baby-frog-light: mix(#fff, $baby-frog, 20%);
$baby-frog-dark: mix(#000, $baby-frog, 20%);
.element {
color: $baby-frog;
box-shadow: 0 0 0 2px rgba($baby-frog, 0.35);
}