Color Converter

Color representation on the web has evolved significantly from the early days of 216 "web-safe" colors to today's wide-gamut color spaces. Understanding the different color models and when to use each one is a practical skill that pays off in both design accuracy and code maintainability. HEX codes (#RRGGBB) are the most recognized format, directly representing the red, green, and blue channel intensities as hexadecimal values from 00 to FF. They are compact and widely supported but make it difficult to reason about color relationships. Looking at #3B82F6, it is not immediately obvious that this is a medium blue with moderate saturation. RGB notation (rgb(59, 130, 246)) is functionally identical to HEX but uses decimal values, making it slightly easier to understand the channel mix. It is the native format for screens, which combine red, green, and blue light to produce colors (additive color mixing). The main limitation is that adjusting perceived lightness or saturation requires changing all three values simultaneously. HSL (hsl(217, 91%, 60%)) solves this problem by mapping color to human perception. Hue rotates through the rainbow as an angle (0/360 = red, 120 = green, 240 = blue). Saturation controls vibrancy (0% = gray, 100% = pure color). Lightness moves from black (0%) through the pure color (50%) to white (100%). This model makes it trivial to generate tints, shades, and harmonious palettes programmatically. The newest addition to CSS color is the OKLCH model (oklch(60% 0.15 240)), designed for perceptual uniformity — equal changes in numeric values produce visually equal changes in perceived color. This fixes a long-standing issue with HSL where, for example, moving from yellow to blue at the same saturation and lightness produces dramatically different perceived brightness. OKLCH is increasingly recommended for design systems that need predictable, consistent color scales. When building design tokens or theme systems, HSL or OKLCH are the strongest choices because they let you define a palette as a base hue with systematic lightness steps, rather than maintaining a list of arbitrary HEX values.