{
  "id": 848294,
  "title": "Choosing colors (for developers)",
  "url": "https://urgent.news/2026/08/14/choosing-colors-for-developers",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-14T07:30:00.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/railsdesigner/choosing-colors-for-developers-1o0o"
  },
  "original_language": "en",
  "account": "The eleven-shade color scale from Tailwind CSS simplifies designing color schemes for backgrounds, borders, hover states, and text. Developers often customize these defaults to better fit their brand. To choose the right color, consider the purpose of the site: blues for finance and B2B sites, greens or teals for health and wellness, purples, pinks, and oranges for creative and entertainment, and reds, oranges, and warm yellows for food and hospitality. If stuck, analyze a competitor's site or use colors from an image. Begin by sampling a prominent color from your hero photo or logo and input it into a color picker to get the OKLCH hue. You don't need a perfect first choice; iterate until you find a suitable hue. For a neutral palette, alias the chosen neutral color to --gray-* in your CSS. This ensures consistency in your templates, regardless of the specific neutral tone. Use the OKLCH color model to derive shades from a single hue variable. This approach allows you to change the base hue and automatically generate harmonious shades without modifying every template. Adjust the lightness, chroma, and hue values to create a balanced palette, but be mindful that slight differences in hue can affect the perceived color.",
  "summary": "The eleven-shade color scale from Tailwind CSS is one of those ideas I keep stealing. You know the one: 50 through 950 gives you enough stops for backgrounds, borders, hover states, text, everything. I use it even when I’m not using Tailwind. But I almost never use the defaults (your site/app ends up looking like every other site built by LLMs). The fix is not complicated. You don’t need a color…",
  "key_points": [
    "Tailwind CSS offers an eleven-shade color scale for design consistency.",
    "Use OKLCH color model to derive shades and maintain consistent neutral palette with --gray- aliases."
  ],
  "editors_take": "Using a deliberate color selection process based on site purpose and OKLCH hue derivation helps developers create harmonious, consistent palettes that reinforce brand identity across templates.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}