Developer Color Guides

Three blue-based 60-30-10 palettes — navy, sky blue, and midnight — with hex codes, CSS variables, and Tailwind v4 @theme blocks. Copy and paste into your project.

The 60-30-10 rule says your dominant color covers 60% of your layout, your secondary covers 30%, and your accent covers 10%. Here's what that means visually — and how to apply it.

Your portfolio is a product pitch where you are the product. Here are 3 palette directions built for developer portfolios — with hex codes, CSS variables, and the persona signal each one sends.

shadcn/ui already uses semantic CSS variables. Here's how to map the 60-30-10 split directly to --background, --secondary, and --primary so every component inherits your palette automatically.

On a landing page, the 10% accent color has one job: make the CTA impossible to miss. Here's how to apply 60-30-10 for conversion hierarchy, avoid accent bleed, and pick a CTA color that passes contrast.

You have three CSS variables. Now you need 40 components to use them consistently. Here's the three-layer token architecture — primitives, semantic tokens, component tokens — that scales without breaking.

Builder.io, Locofy, or Anima — which actually ships clean code? We compare the top AI design-to-code tools, test color token handling, and show the real workflow.

A SaaS dashboard needs more than three colors. Here's how to extend the 60-30-10 base palette with status indicators, accessible chart colors, and dark sidebar contrast — with CSS variables and Tailwind config.

Dark mode is not color inversion. The 60-30-10 proportions stay the same — the hex values change entirely. Here's the CSS variables setup, contrast checks, and Tailwind dark: integration.

AI design-to-code tools export your layout but flatten your color roles. Here's how to set up Figma variables with semantic naming so the 60-30-10 split survives the handoff.

You have a Figma file with color variables. Here's how to get them into CSS custom properties and Tailwind config — step by step.

Set up a 60-30-10 color palette in Tailwind v4 (@theme) and v3 (module.exports) with real hex values. Both formats, side by side.

The complete CSS custom properties setup for a 60-30-10 color system. Copy, paste, customize the hex values. Framework-agnostic.

When should your UI use harmonious colors vs high contrast? WCAG ratios, CSS examples, and Stripe-style decisions using the 60-30-10 rule.

Five 60-30-10 palettes with hex codes, CSS variables, and Tailwind v4 @theme blocks. Pick one, paste it, customize.

Data-backed color choices for digital products. How fintech, SaaS, and healthcare UIs use the 60-30-10 rule to lift conversions and engagement.

Step-by-step guide to picking a working color palette for your website or app. Color scheme types, testing methods, and the 60-30-10 rule applied to real UI.

Stop guessing which color goes where. Learn how to map your palette to layout regions with CSS variables and Tailwind, then apply it to a real SaaS app.