A neutral palette is not "gray plus white." Good neutrals carry a tiny color bias, enough contrast for real text, and enough warmth or coolness to make the brand feel intentional. Bad neutrals make every screen look like a wireframe.
The fastest fix: pick one direction before you touch the color picker. Warm neutrals feel editorial and human. Cool neutrals feel technical and precise. True gray is rarely the best choice because it has no personality at all.
Apple uses near-neutral backgrounds with tiny blue-gray shifts. The pages still feel white, but the shadows and borders have enough temperature to avoid looking sterile.
Notion leans warmer. Its off-white surfaces and soft gray borders make long reading sessions feel less harsh than pure #FFFFFF and #000000.
Linear goes cooler. The product UI uses blue-tinted grays because the brand wants to feel fast, technical, and sharp. Same neutral strategy, different emotional target.
The practical rule: if your product is finance, developer tools, analytics, or SaaS infrastructure, start with cool neutrals. If it is education, wellness, writing, lifestyle, or creator tools, start with warm neutrals. You can break the rule later. Just do not start by guessing.
Apple uses near-neutral backgrounds with tiny blue-gray shifts. The pages still feel white, but the shadows and borders have enough temperature to avoid looking sterile.
Notion leans warmer. Its off-white surfaces and soft gray borders make long reading sessions feel less harsh than pure #FFFFFF and #000000.
Linear goes cooler. The product UI uses blue-tinted grays because the brand wants to feel fast, technical, and sharp. Same neutral strategy, different emotional target.
The practical rule: if your product is finance, developer tools, analytics, or SaaS infrastructure, start with cool neutrals. If it is education, wellness, writing, lifestyle, or creator tools, start with warm neutrals. You can break the rule later. Just do not start by guessing.
Apple uses near-neutral backgrounds with tiny blue-gray shifts. The pages still feel white, but the shadows and borders have enough temperature to avoid looking sterile.
Notion leans warmer. Its off-white surfaces and soft gray borders make long reading sessions feel less harsh than pure #FFFFFF and #000000.
Linear goes cooler. The product UI uses blue-tinted grays because the brand wants to feel fast, technical, and sharp. Same neutral strategy, different emotional target.
The practical rule: if your product is finance, developer tools, analytics, or SaaS infrastructure, start with cool neutrals. If it is education, wellness, writing, lifestyle, or creator tools, start with warm neutrals. You can break the rule later. Just do not start by guessing.
:root {
--neutral-50: hsl(40, 30%, 98%);
--neutral-100: hsl(38, 24%, 95%);
--neutral-200: hsl(36, 18%, 88%);
--neutral-300: hsl(34, 14%, 78%);
--neutral-400: hsl(32, 10%, 62%);
--neutral-500: hsl(30, 8%, 46%);
--neutral-600: hsl(28, 10%, 34%);
--neutral-700: hsl(26, 12%, 24%);
--neutral-800: hsl(24, 14%, 16%);
--neutral-900: hsl(22, 16%, 10%);
}
body {
background: var(--neutral-50);
color: var(--neutral-800);
}
.card {
background: white;
border: 1px solid var(--neutral-200);
}复制粘贴到项目即可使用。
Apple uses near-neutral backgrounds with tiny blue-gray shifts. The pages still feel white, but the shadows and borders have enough temperature to avoid looking sterile.
Notion leans warmer. Its off-white surfaces and soft gray borders make long reading sessions feel less harsh than pure #FFFFFF and #000000.
Linear goes cooler. The product UI uses blue-tinted grays because the brand wants to feel fast, technical, and sharp. Same neutral strategy, different emotional target.
The practical rule: if your product is finance, developer tools, analytics, or SaaS infrastructure, start with cool neutrals. If it is education, wellness, writing, lifestyle, or creator tools, start with warm neutrals. You can break the rule later. Just do not start by guessing.
用这些免费工具实操你学到的知识：