Blog
By Siavash Ghanbari · Founder of Emojar
🎲7 Practical Ways to Use a Random Color Generator
From breaking a design rut to placeholder avatars and chart test data, here are seven useful jobs for random colors, plus which mode to pick for each.
Tool GuideGeneratorsColorDesign🌈Complementary, Analogous or Triadic? Choosing a Color Scheme
A decision guide to the seven color harmony rules, what each one produces from a single base color, and which to pick for websites, brands and slides.
Tool GuideColorDesignDecision Guide🌅CSS Gradient Checklist: Angles, Stops and No Muddy Middles
Nine practical tips for better CSS gradients, from fixing the gray dead zone between complementary colors to hard stops, angles and readable text.
Tool GuideColorCSSDesign🎨HEX to HSL: Build Shades, Hover States and Themes
Convert a brand HEX code to HSL and you can create lighter, darker and hover variants by changing one number. A practical guide with a full shade scale.
Tool GuideColorCSSTheming🎨HEX to RGB in CSS: Adding Transparency to Brand Colors
Why developers convert HEX to RGB, how to add transparency with rgb() and 8-digit HEX, and a reusable CSS variable pattern for see-through brand colors.
Tool GuideColorCSSWeb Development🔄HEX, RGB, HSL, HSV or CMYK: Which Color Format Fits the Job?
Five color formats, five different jobs. Where each one belongs, from CSS and design handoff to color pickers and print, with one color shown in all five.
Tool GuideColorDesignUse Cases👁️How Color Blindness Simulation Works and How to Check a Palette
What protanopia, deuteranopia and tritanopia do to colors, how the Machado 2009 model simulates them, and how to find palette pairs that collide.
Tool GuideColorColor BlindnessAccessibility🏷️How to Find the Name of a Color From Its HEX Code
Why most colors have no exact name, how CIEDE2000 picks the closest one, and what the distance number tells you about how good the match really is.
Tool GuideColorCSSDesign🌈How to Make a Mesh Gradient in CSS Without Any Image File
CSS has no mesh gradient, but stacked radial-gradient() layers come close. See how the layers work, with the exact code for an aurora background.
Tool GuideColorCSSGradients🎨HSL to RGB: Why Same Lightness Doesn't Mean Same Contrast
Pure yellow and pure blue share 50% HSL lightness yet differ eightfold in contrast with white. Why converting HSL to RGB matters for accessible colors.
Tool GuideColorAccessibilityCSS🎨RGB to HEX for Design Handoff: Getting Colors Into Code
Turning a designer's RGB values into HEX codes for CSS and style guides, with the conversion math, a handoff checklist and the rounding issues to watch for.
Tool GuideColorDesign HandoffCSS🎨RGB to HSL Formula, Explained Step by Step
How RGB values become hue, saturation and lightness, with two fully worked examples you can check by hand and code-friendly formulas for each step.
Tool GuideColorMathExplainer♿Why Your Colors Fail WCAG Contrast (and How to Fix Them)
Gray text that looks fine, a brand blue that fails, white on yellow: the most common WCAG contrast failures, what causes them, and how to fix each one.
Tool GuideColorAccessibilityTroubleshooting🎯How to Get the Exact Color Code From a Logo or Screenshot
Need the HEX code of a brand color you only have as an image? A walkthrough of picking it accurately, and why your first click is often slightly off.
Tool GuideColorDesignHow-to🖌️How to Extract a Color Palette From a Photo or Logo
Turn any photo, logo or screenshot into 3 to 12 ready-to-use colour codes, with coverage percentages, CSS variables and JSON. No upload needed.
Tool GuideColorDesignImages🎯How to Find the Color and Position of Any Pixel in an Image
Get the exact HEX, RGB and HSL value of one pixel, plus its x and y coordinates in the original image, with a magnifier and arrow-key nudging.
Tool GuideImageColorImages