Color Mixer
Pick two colours, slide the blend ratio, and instantly get the midpoint colour, a usable shade scale, and CSS you can paste into a stylesheet.
Source Colours
Paste HEX values directly or use the colour pickers for quick exploration.
Colour A
Colour B
Blend Ratio
0% keeps Colour A exactly as-is. 100% becomes Colour B entirely.
Quick Presets
Start from a mood, then nudge it toward your own brand palette.CSS Gradient
Paste this into a background property, then tweak angle or stops if needed.
Mixed Result
HEX, RGB, HSL, and the stepped blend scale stay in sync below.
Intermediate Shades
A quick view of the blend journey from 0% to 100%.- Enter the two HEX colours you want to blend, or choose them with the colour pickers.
- Move the ratio slider to decide whether the result should stay closer to Colour A or move further toward Colour B.
- The right panel updates HEX, RGB, and HSL instantly so you can reuse the result in design files, CSS, or design system notes.
- The intermediate shade list shows multiple blend checkpoints, which is useful for hover states, borders, muted backgrounds, or emphasis colours.
- If you want a faster starting point, apply a preset or hit the random combo button.
Tip: The CSS gradient output is not meant to be the only answer. It is a fast starting point for bringing both source colours and the mixed midpoint into a UI concept.
When would you use this tool?
Use it when you already have two anchor colours, such as brand accents, button colours, or illustration tones, and need a midpoint colour, a quick shade scale, or a usable CSS gradient between them.
How does the blending work?
The current mixer uses linear interpolation in RGB space. It is fast, predictable, and practical for web interfaces, background treatments, and early-stage visual exploration.
Why does the mixed colour look different from what I expected?
Different colour spaces blend differently. RGB blending is screen-oriented, so if you are working on print output or perceptually uniform scales, you may want to refine the result in a more specialised colour workflow.
Can I use this to build a brand shade scale?
Yes. It is useful for generating 5 to 6 transitional shades quickly, then selecting the best ones for hover states, cards, dividers, background layers, or emphasis highlights.
Can I input RGB or HSL directly?
The primary input format here is HEX because it is the easiest format to move between design files and front-end code. If you already have RGB or HSL values, convert them to HEX first with the site’s colour converter.
Where can I use the generated CSS?
You can paste it directly into a CSS background property, or bring it into Figma, slide decks, and design system documentation as a quick starting point.
Color Contrast and Accessibility: WCAG Standards, Contrast Ratio Principles, and Design Improvement Tips
Color contrast ratio is a core metric in accessible web design, affecting readability for users with low vision, color blindness, and in varied lighting conditions. This guide explains WCAG 2.1 AA/AAA levels, relative luminance calculations, and common design mistakes with practical fixes.
The Complete Color Code Guide: RGB, HEX & HSL Explained
RGB, HEX, and HSL all describe the same colors — but in completely different ways. This guide breaks down the math, the design logic, and when to use each color model, from screen design to print and accessibility.
JPG, PNG, WebP, or GIF? A Complete Guide to Choosing the Right Image Format
Why is a PNG screenshot sometimes ten times larger than the same image saved as JPG? When should you use WebP? Is GIF obsolete? This guide explains image compression fundamentals and gives you a clear decision framework for every situation.
Social Media Image Editing Workflow: Sizes, Visual Consistency, and Export Settings
Great social visuals come from process, not luck. Learn a repeatable image editing workflow that covers dimensions, composition, brand consistency, and output settings for high-performing posts.
The Complete Markdown Guide: From Basics to Real-World Applications
Markdown is the go-to lightweight markup language for writers, developers, and content creators. This guide covers everything from core syntax to advanced techniques and platform-specific applications.
How to Merge, Split, and Compress PDFs: A Complete Guide to Everyday Document Management
Need just two pages from a 30-page contract? Have five separate reports to combine before a meeting? File too large to upload? This guide walks through the four most common PDF operations — no software installation required.