8 min
Code Minification: Complete Guide to Reducing File Size
I have slashed bundle sizes by 60% on client projects at Šikulovi s.r.o.. Here is everything I have learned about minifying JavaScript, CSS, and HTML for production.
Loading...
Master color models for web development. Learn RGB, HSL, HEX, and CMYK differences, when to use each format, CSS color functions, accessibility contrast ratios, and how to build effective color palettes.
I used to just copy HEX codes from Figma and call it a day. Then a designer asked me to make a button 15% darker on hover. I had no idea how to do that without asking for another color code.
That's when I realized I'd been working with colors for years without actually understanding them. Now I can build entire color systems, create accessible palettes, and have actual conversations with designers. Here's what I wish I'd learned earlier.
Every color on your screen is red, green, and blue light mixed together. That's it. Once this clicked for me, everything else made sense.
RGB mixing is the opposite of paint. Adding colors makes things BRIGHTER, not darker. It took me embarrassingly long to internalize this.
HEX isn't a different color system - it's just RGB written in hexadecimal. #FF0000 is rgb(255, 0, 0). Once I understood this, converting became trivial.
When I need to convert manually (rare these days with tools):
HSL changed how I work with colors. Instead of guessing RGB values, I think in terms humans understand: what COLOR (hue), how VIVID (saturation), how LIGHT or DARK (lightness).
Remember that hover state problem? With HSL it's trivial:
Figma and Photoshop use HSB (Hue, Saturation, Brightness), not HSL. The values look similar but aren't interchangeable. I've been burned by this when copying values directly.
I rarely deal with CMYK, but occasionally a client needs print materials to match their web colors. Heads up: not all screen colors can be printed. CMYK's gamut is smaller.
I use named colors more than I probably should. They're readable and great for prototyping. tomato, coral, rebeccapurple - they just make code nicer to read.
CSS keeps getting better. color-mix() and relative color syntax mean I rarely need Sass for color manipulation anymore.
I use CSS custom properties for every color now. Theming and dark mode become trivial.
Here's a technique I use constantly: store HSL components separately. This lets you do math on colors.
WCAG contrast requirements aren't suggestions. I've had to fix accessibility issues in production too many times. Now I check contrast as I go.
Took me a while to break these habits:
Red-green colorblindness affects 8% of men. Never rely on color alone to convey meaning.
At Šikulovi s.r.o., we structure palettes like this:
When I need to pick colors that work together:
This is my formula for consistent shade scales:
Dark mode isn't just inverting colors. I learned this the hard way when our first dark mode attempt looked terrible.
Modern CSS makes detecting user preferences easy:
When I need to manipulate colors in JS (data viz, dynamic theming):
Display P3 is 25% bigger than sRGB. Most new Apple devices support it. But honestly, I rarely bother - the difference is mostly noticeable in very vivid colors.
My color workflow tools:
Understanding color models wasn't optional - it was holding me back. Now I can actually talk to designers, build dark mode that works, and create accessible interfaces without guessing.
Understanding color theory transforms how you write CSS and build interfaces. RGB and HEX are the foundation, HSL makes manipulation intuitive, and accessibility requirements guide your choices.
Start by using HSL for your color systems—it makes creating variations and maintaining consistency far easier than RGB. Always check contrast ratios, never rely on color alone for meaning, and test across different color vision types. With these principles, you will build more accessible, maintainable, and visually consistent applications.
RGB and HEX represent the same colors—HEX is just a compact hexadecimal notation of RGB values. #FF5733 is identical to rgb(255, 87, 51). HEX is shorter to write, while RGB is more readable when you need to understand or modify individual color channels.
Use HSL when you need to create color variations (lighter, darker, desaturated), build consistent palettes, or make colors programmatically adjustable. HSL is more intuitive because hue, saturation, and lightness map to how humans think about color, making it easier to predict results when adjusting values.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects need at least 3:1 contrast against adjacent colors.
Chrome DevTools has a built-in color blindness simulator: open DevTools, press Ctrl+Shift+P, search for "Rendering", and enable "Emulate vision deficiencies". Also, ensure you never use color alone to convey information—always add icons, patterns, or text labels.
Start with dark gray backgrounds (#121212 to #1a1a1a) instead of pure black. Use slightly muted text colors (#e0e0e0) instead of pure white. Increase saturation slightly for accent colors on dark backgrounds. Always verify WCAG contrast ratios still pass in dark mode.
Use CSS custom properties for maintainability. Store HSL components separately (--hue, --sat, --light) to enable easy manipulation. Group colors by purpose (--color-primary, --color-error) rather than appearance. This approach enables theming and makes your color system flexible.
CMYK to RGB conversion requires mathematical transformation since they use different color models. Use a color converter tool like our Color Converter at /color for accurate results. Note that some CMYK colors cannot be exactly reproduced in RGB due to gamut differences.
Display P3 is an extended color space with about 25% more colors than sRGB, supported on modern displays. Use them for vivid accents on supporting devices, but always provide sRGB fallbacks. The difference is most noticeable in bright, saturated colors.
Founder of CodeUtil. Web developer building tools I actually use. When I'm not coding, I experiment with productivity techniques (with mixed success).
I have slashed bundle sizes by 60% on client projects at Šikulovi s.r.o.. Here is everything I have learned about minifying JavaScript, CSS, and HTML for production.
Master the art of placeholder content. Learn the history of Lorem Ipsum, when to use it, modern alternatives, and best practices for realistic test data in your designs and applications.