Color & Palette Tool

Color Palette Helper

Convert HEX, RGB, and HSL colors; generate shades, palettes, and copyable CSS variables for sketches, interfaces, and documents.

Start mixing Copy CSS variables

Quick start

Start from a common color task

Pick a color close to your task, then tune conversion, palette mode, and shades below.

Input

Color HEX

Fine tune

Value Opacity

Format Code

Red Green Blue Opacity

RGB

R G B

HSL

H S L

Generate

Palette mode Variable prefix Shade count 9 Hue step 28

Current color

#176FDF Bright blue

Color codes

Common platform formats, one-click copy

Shades

For UI, illustration, and annotation levels

CSS

Copyable variables

Next step

Bring the palette into a Sketching workflow

Use this helper before creating: settle a base color, accents, and light-to-dark levels, then move into apps for drawing, capture, organization, or layout.

Yuflo Pair with picking, screenshot markup, and menu bar utilities for daily macOS color work. Sketch Board Use shade ramps for brushes, layers, annotations, and cover drafts. Framelo Prepare consistent accent colors for frame extraction, collage, and media annotation. Drawing Practice Sheet Generator Apply the base color to dot, line, storyboard, and composition templates.

Guide

What does this tool solve?

The Color Palette Helper converts a color between HEX, RGB, and HSL, then generates analogous, complementary, triadic, split-complementary, or monochrome palettes with shade ramps and CSS variables. It is useful for interface sketches, illustration color exploration, screenshot annotation, teaching materials, and web styling drafts.

If you already picked a color from Yuflo, another design app, or the system picker, paste it into the HEX field. If you are drafting web or app styles, copy the generated variable block and keep moving.

Should I use HEX, RGB, or HSL?

HEX is easy to paste into most design tools. RGB is useful in code and overlays. HSL is easier when tuning hue, saturation, and lightness.

What are shade ramps for?

Shade ramps keep one base color coherent across light backgrounds, borders, action buttons, dark text, and illustration shadows.

Why generate CSS variables?

Variables let you name and reuse colors, avoid repeated manual copying, and make later palette changes easier.