Tech blog and developer tools
Generate Tailwind-style color scales with WCAG contrast
A color palette generator creates systematic color scales from a single base color. The approach used here, inspired by Tailwind CSS, generates 11 shades from 50 (lightest) to 950 (darkest). This design system pattern was popularized by Material Design in 2014 and adopted by Tailwind in 2017, giving developers a consistent way to apply colors across entire applications.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with visual impairments. A contrast ratio of 4.5:1 is required for normal text (WCAG AA), while large text (18px+ bold or 24px+ regular) only needs 3:1. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, making accessibility essential for any public-facing website.
Fun fact: the hex color system (#RRGGBB) was introduced in HTML 2.0 in 1995. The original HTML specification only supported 16 named colors (like "aqua", "fuchsia", and "lime"). CSS 3 later expanded this to 147 named colors, including oddly specific names like "PapayaWhip", "BlanchedAlmond", and "LemonChiffon", which were actually borrowed from the X11 color naming system from 1985.
RGB maps to how screens work (red, green, blue subpixels). HSL (Hue, Saturation, Lightness) maps to how humans think about color. To create a shade scale, HSL is ideal because you simply adjust lightness. Hex is just a compact way to write RGB values.
Modern design systems use "design tokens" instead of hardcoded colors. Instead of #3b82f6, you reference "primary-500". This lets you swap entire color themes by changing the token values, enabling features like dark mode and white-labeling.
Dark mode is not just inverting colors. Light text on dark backgrounds needs different contrast ratios because bright text on black can cause "halation" (glowing effect). This is why dark themes typically use off-white (#E0E0E0) instead of pure white.
Blue is the most common color in tech brands (Facebook, Twitter, LinkedIn, IBM) because it conveys trust and reliability. Green signals success or money (Spotify, Robinhood). Red creates urgency (YouTube, Netflix). These choices are backed by decades of psychology research.