命名颜色 · #BAA243
Sea Squash
Sea Squash 即 #BAA243：rgb(186 162 67)、hsl(48 47% 50%)、oklch(0.715 0.117 95)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Yellow mean? → · Sea Squash color name →
#BAA243
oklch(0.715 0.117 95)
颜色转换
- HEX
- #baa243
- RGB
- rgb(186 162 67)
- HSL
- hsl(48 47% 50%)
- HWB
- hwb(48 26% 27%)
- OKLCH
- oklch(0.715 0.117 95)
- OKLab
- oklab(0.715 -0.01 0.117)
- CIE Lab
- lab(67.4 0.97 51.16)
- LCH
- lch(67.4 51.17 88.9)
- CMYK
- cmyk(0% 13% 64% 27%)
浅色调 · 深色调 · 灰色调
浅色调
- C1AB59
- C7B56D
- CEBE80
- D5C793
- DCD0A5
- E3DAB7
- EAE3C9
- F1ECDB
- F8F6ED
深色调
- A18C39
- 89772F
- 726326
- 5C4F1D
- 463C14
- 322A0C
- 1E1905
- 0D0A01
- 020100
灰色调
- B49F4D
- AE9C55
- A8985C
- A29562
- 9C9268
- 978E6E
- 918B73
- 8B8777
- 86847C
配色和谐
互补色 +180°
- BAA243
Sea Squash
- 8E9DEC
≈ Cold Lips
类似色 -30° +30°
- BAA243
Sea Squash
- D5934E
≈ Salt Caramel
- 92B05B
≈ Asparagus Cream
三角配色 +120° +240°
- BAA243
Sea Squash
- 2BB5D1
≈ Ocean Sigh
- D086C0
≈ Cyclamen
分裂互补色 +150° +210°
- BAA243
Sea Squash
- 5FAAE7
≈ Blue Jeans
- B490DE
≈ Dreamy Candy Forest
四角配色 +90° +180° +270°
- BAA243
Sea Squash
- 2BBBAD
≈ Turquoise Topaz
- 8E9DEC
≈ Cold Lips
- E08399
≈ Rose Soiree
对比度与无障碍
Ag
Fail白底
WCAG 2.51:1 · APCA Lc 49
Ag
AAA黑底
WCAG 8.33:1 · APCA Lc 53
最佳文字颜色: #000000
WCAG 8.33:1 (AAA) · APCA Lc 53
Contrast pairs
代码片段
CSS
:root {
--sea-squash: #baa243;
--sea-squash-rgb: 186 162 67;
--sea-squash-oklch: oklch(0.715 0.117 95);
}
.element {
color: var(--sea-squash);
background-color: hsl(48 47% 50%);
border-color: oklch(0.715 0.117 95);
}Tailwind CSS v4
@theme {
--color-sea-squash: #baa243;
--color-sea-squash-50: #fef6d0;
--color-sea-squash-100: #f3e9bc;
--color-sea-squash-200: #e2d59b;
--color-sea-squash-300: #c8b870;
--color-sea-squash-400: #b49d45;
--color-sea-squash-500: #9f8400;
--color-sea-squash-600: #867005;
--color-sea-squash-700: #6b5a07;
--color-sea-squash-800: #504103;
--color-sea-squash-900: #382d03;
--color-sea-squash-950: #231a00;
}SCSS
$sea-squash: #baa243;
$sea-squash-rgb: 186, 162, 67;
$sea-squash-light: mix(#fff, $sea-squash, 20%);
$sea-squash-dark: mix(#000, $sea-squash, 20%);
.element {
color: $sea-squash;
box-shadow: 0 0 0 2px rgba($sea-squash, 0.35);
}