Color Studio
Build a palette. See it in real designs. Test it. Take it with you.
Looking for another tool? Browse all toolsGenerate or choose a palette to unlock the next steps.
Need a simpler or larger color palette? Open the Color Palette Generator.
Saturated Cobalt
HEX, RGB, HSL, OKLCH and CSS names supported.
8–10 colors recommended. A flexible starting point for most websites, apps and brands.
How palette sizing works
The Colors control sets the size of the palette. Adding colors keeps existing colors where possible and creates reserve colors. If you remove colors after making edits, Qolorio will ask which colors may be removed. Choose Generate palette when you intentionally want a new variation.
How harmony and mood work
Harmony controls the color relationship around your Base color.
- Analogous: neighboring hues for a calm, connected result.
- Complementary: opposite hues for clear contrast.
- Split complementary: the two neighbors of the opposite hue for contrast with more variety.
- Triadic: three evenly spaced hues for balanced variety.
- Tetradic: two complementary pairs for a broad system.
- Square: four evenly spaced hues for an energetic range.
- Monochrome: variations of one hue.
- Vibe / mood: shapes saturation, lightness and temperature around a chosen mood instead of a fixed hue geometry.
Preparing image tools…
Drop an image here
Your image stays in this browser. Qolorio does not upload it.
Samples: 0 / 10
Choose, drop or photograph an image. Then analyze automatically, click or tap the image, or focus the image and press Enter to add a sample point.
When you already have a customized palette, Qolorio will ask whether the image should start a new palette, replace unlocked colors, or only add new reserve colors where space is available. You can find your current palette below.
Search the current Qolorio palette library by keyword, category, mood or style, then choose 2–20 colors.
When your current palette is customized, choosing a Library palette will let you start over, replace unlocked colors, or only add new reserve colors where space is available.
A controlled creative jump
About 75% of proposals remix compatible Qolorio families; about 25% bring back an existing Library palette. Nothing changes until you choose Use this palette.
Using this proposal creates a fresh role suggestion. Lock color values and pin role positions first if they must survive the change.
Choose a background foundation
Choose a light or dark background and the main text color behind your palette. What is a canvas foundation?
Shape your colors and their roles
Choose what to edit
Colors edits the palette itself. Roles changes the jobs those colors perform.
Palette Overview
Choose a numbered color to open its detailed card. Roles describe what each palette slot currently does; swapping exchanges only the color values, not their meaning.
Lock protects the color value; Pin protects the role assignment. Locked colors and the Base color keep their exact values when you regenerate. Use Reset on a color card to restore that slot to the saved source palette. Hold the six-dot grip to swap color values, or use Select & Swap. Use the role chips on a card to change what that palette slot is responsible for.
Semantic roles
Give each color a job, such as page background, text, button or warning. Explore color roles.
How roles work
Every role has one palette color. A color may serve several roles or stay in reserve. Pin keeps an assignment fixed; Lock protects the exact value. Re-suggest recalculates assignments; Reset custom roles restores changed assignments without moving pinned roles.
Essential roles keeps the core decisions in view. All 31 roles opens the complete professional semantic system.
See the palette at work
See how your role assignments work across websites, interfaces, editorial layouts and other design contexts.
How Preview worksUse your own image ▾
Custom images remain local in this browser and fill the scene without distortion.
Compare each label, icon and border in the current colors. Check the same states in the final interface.
- SuccessSaved
- WarningCheck this
- ErrorFix required
- DisabledUnavailable
Choose or click something in the preview
Choose an element above or click text, surfaces, buttons, status items, charts or brand elements. Qolorio will mark the exact item and show the roles and colors that control it.
Current palette
The same live palette is used in Create, Test and Export. Use Change color in the Preview Inspector to choose an existing palette color for a role. If the palette needs another option, add a reserve color here or return to Create for full palette editing. Lock color keeps a color value fixed; Pin role keeps an assignment fixed.
Advanced role editor
Expert controls for all 31 semantic roles. Change color opens a simple palette popup. Pin role keeps an assignment fixed until you unpin it; Color Lock separately protects the color value itself. Reserve colors can be assigned here too.
Typography
Choose a preset for a quick typographic direction. Fine-tune fonts, sizes and weights only when you need more control.
Fine-tune typography
H1, H2 and H3 control typographic scale. Heading Text and Secondary Heading Text are separate semantic color roles.
Accessibility simulation
Preview the same design in grayscale or common color-vision simulations. This changes only what you see here; it does not change your palette.
Shows how the preview may look with common color-vision differences; your palette stays unchanged.
Test your color system
Contrast uses the same semantic roles as Preview and Export.
How Test worksWCAG 2.2 AA contrast guidance
Guided by WCAG 2.2 AA contrast thresholds. Qolorio checks the core text and background pairs it can infer from your color roles. WCAG 2.2 uses 4.5:1 for normal text and allows 3:1 for large text; because Studio cannot know your final rendered typography, it uses 4.5:1 as a conservative first pass for these core text pairs. This is an early design indication, not a conformance audit: final typography, controls, focus states, color-only meaning, content and implementation still need review. Read the color glossary.
Move from palette to production
Copy production-ready color values, download visual references, or save the project to continue later.
Share the palette as a board or brandbook
Semantic code and design tokens
Export plain values without semantic tokens
Select one or more formats. Qolorio groups each selected format as its own list.
Save the editable project or accessibility results
Use visual exports for sharing, code exports for implementation, and Project TXT when you want to continue editing the same Qolorio project later.
How to use Color Studio
Color Studio connects four steps: Create, Preview, Test and Export. Start with a color, an image, a Library palette or Surprise me, then use the same palette throughout your project.
Choose your starting colors using the controls at the top of Create. When you start with a Base color, your color cards appear after you select Generate palette. Preview, Test and Export unlock at the same time. If you return to an existing project in this browser, its palette and next steps are available immediately.
Start in Create
Choose a starting point and number of colors
Choose Color, Image, Library or Surprise me. The color-count control is part of your chosen starting method.
With Color, enter a Base color, choose the number of colors and a Harmony or Vibe, then select Generate palette. This is the only palette-generation action. Edit base color and the eyedropper help you choose the Base color, but they do not generate the palette by themselves.
Harmony describes the hue relationship around your Base color. Open How harmony and mood work for a short explanation of Analogous, Complementary, Split complementary, Triadic, Tetradic, Square, Monochrome and Vibe / mood. Vibe / mood shapes saturation, lightness and temperature instead of following one fixed hue geometry.
With Image, choose an image, review or sample its colors and select Use extracted palette. In Library, browse or search the palette families and choose Use this palette. Surprise me lets you review a suggestion before using it.
Choose a canvas foundation
The foundation controls follow the starting controls, above your current palette. Choose Palette only to work with the palette colors, or Light canvas or Dark canvas for a light or dark foundation.
Studio explains whether suitable background and text colors are already available, or whether you can add suggested neutral support colors.
Edit your current palette
Once you generate a palette from your Base color or choose a ready-made palette, the existing Current palette section appears below. Its color cards, color formats and editing actions are available together.
Choose Edit on a color card to change that color. Use Lock to keep its value when regenerating. Switch between Colors and Roles to edit the colors themselves or the jobs they perform in your design. Pin keeps a role assigned to its chosen color.
The color-count control stays in the starting controls above. Changing the size keeps existing colors where possible; protected colors and roles can limit which colors may be removed. Select Generate palette whenever you intentionally want a new variation around the current Base color, Harmony or Vibe. Locked colors and pinned roles remain protected.
Continue with the same project
Preview, Test and Export remain unavailable until a palette is generated or chosen. Then use Preview to see your colors in a design, Test to check color relationships and Export to take the result with you.
Your project is saved in this browser on this device when browser storage is available. Choose Options → Download project to keep a separate copy.
One palette. Four connected stages.
Create
Choose a starting color, image, Library palette or surprise, and set the number of colors. For a Base color, choose a Harmony or Vibe and select Generate palette. Choose your canvas foundation using the controls above the palette.
After you generate or choose a palette, the color cards appear and Preview, Test and Export unlock. Edit colors, lock important values and assign or pin roles. The same project continues through all four steps.
Preview
Now stop looking at swatches and see the system doing real work.
Qolorio places the same palette into websites, shops, dashboards, apps, editorial layouts, games and other design contexts.
Use the Preview Inspector to click real elements and see which semantic roles control their backgrounds, text, actions and states.
Something does not look right? Change the assigned color or return to Create and refine the palette itself.
When the colors and roles feel convincing in context, continue to Test.
Test
Test checks the key contrast and readability relationships in the color system.
It can reveal problems such as text that does not contrast strongly enough with its background or an action that needs a different light or dark text color.
Qolorio uses WCAG-based contrast calculations as a practical first indication. The results can help you make better color decisions, but they are not a complete accessibility audit of a finished website, app or design.
If Test exposes a problem, adjust the relevant role or color and look at the result again in Preview.
Export
Happy with the palette, its roles and the important contrast relationships?
Export the finished system in useful visual, design, code and data formats and take it into the next part of your project.
Two ways to build with Qolorio
Qolorio has two larger color workflows. The right one depends on whether you want to build a working color system or the palette itself.
Color Studio
Use Studio when the colors need to become a working design system.
Studio works with palettes of up to 20 colors and adds structure around them: foundations, semantic roles, realistic previews, contrast and readability testing, and system-oriented exports.
It is useful for websites, apps, dashboards, brands, presentations, games and other projects where colors need to perform different jobs together.
Choose Color Studio when you want to know not only which colors you have, but what they should do.
Color Palette Generator
Use the Qolorio Color Palette Generator when the palette itself is the main job.
Explore thousands of palette families, create palettes from your own colors, harmonies, moods or Surprise Me, or extract colors privately from an image.
Color Palette Generator supports palettes from 2 to 256 colors, making it a better fit for larger color collections, illustration and artwork, extensive brand palettes, gradients and color studies, game or map palettes, or any workflow where you want many colors without assigning a complete semantic design system.
It also provides dedicated exports for creative and design workflows.
Choose Color Palette Generator when you want to explore, build or export the colors themselves.
Open the Color Palette Generator
Sometimes you only need one color job
You do not always need Studio or a complete palette-building workflow.
Qolorio also includes focused tools that let you go directly to a specific task.
Explore or find colors
Use Color Explorer, Color Mixer, the Image Color Picker or Color Palette Library when the main job is discovering colors and combinations.
Use Color DNA when you are looking for one meaningful starting color for a person, brand or project before building a fuller palette.
Want a quick website preview? Try Live Canvas to see a compact set of color roles working in a live website before you build a fuller system. Open Live Canvas
Check colors
Use the Color Contrast Checker when you only need to compare a foreground and background. Use the Color Vision & Palette Checker when you want to investigate how a palette keeps its distinctions under different color-vision simulations.
Work with a known color
Use Color Match when you already have one important color and want useful colors around it.
Already have a website, theme or code export? Use the Color Extractor from Code to see the palette already inside it before you build on it.
Convert, name or identify
Use Color Converter, Color Name Finder, CSS Color Names and Color Charts when you need values, a memorable color name or a practical reference rather than a complete design system.
Use Color Studio when those individual jobs need to become one connected color system.
Choose the tool that matches what you need right now.