Tutorials
Step-by-step tutorials for every OmniColor tool. Learn by doing — each tutorial walks through a real workflow you can use today.
Getting Started
Pick Your First Color
Learn to use the OmniColor color picker and copy colors in every format.
Convert HEX to RGB
Understand hex math and convert colors between formats.
Pass WCAG Contrast
Test colors for accessibility and fix contrast failures.
Color Pickers
Using the Color Picker
Full tour of the color picker with hue, saturation, brightness and alpha.
Extract Colors from Images
Upload an image and pick colors from any pixel — all in your browser.
Generate Random Colors
Use the random color picker for inspiration and testing.
Palettes
Building Color Palettes
Create harmonious palettes with complementary, analogous and triadic rules.
Master Color Harmony
Deep dive into all six harmony types and when to use each.
Build a Brand Palette
Create a complete brand color system from a single base color.
Gradients
CSS Gradients
Master linear, radial and conic gradients with valid CSS output.
Using the Gradient Generator
Create complex multi-stop gradients and export as CSS.
Mix Two Colors
Blend colors with precise ratio control and see intermediate blends.
Accessibility
Check Color Contrast
Test WCAG AA and AAA compliance for any color pair.
Design for Color Blindness
Test colors against 7 CVD types and design accessible interfaces.
Accessible Color Design
Complete guide to building accessible color systems.
Design Systems
Design Tokens
Build scalable color tokens from any base color.
CSS Variables for Color
Use CSS custom properties to manage color systems.
Dark Mode Colors
Design dark mode color systems that pass accessibility.
Want a Specific Tutorial?
If there is a workflow you would like to see explained step-by-step, let us know.
Request a Tutorial