The Qolorio Guide

Make color work.

Choosing a color is easy.

Choosing a group of colors that still works when you add text, buttons, backgrounds, links, states and real content? That gets interesting.

Qolorio is a color workspace for turning colors you like into a color system you can actually use.

Start with colors you already have, build a palette yourself, use an image, choose a ready-made palette or let Qolorio surprise you. Shape the palette, give colors useful roles, see the system in realistic previews, test the relationships that matter and export the result for your next project.

You do not need to be a designer.

You do not need to know every color model.

And you definitely do not need twenty colors just because Qolorio can handle twenty.

Pretty colors are a start. Making them work is the interesting part.

Open Color Studio

What is Qolorio?

Most color tools answer one question:

Which colors look good together?

Qolorio goes further.

It also asks what those colors are going to do.

• Which color should become the page background?
• Which one can carry body text?
• What should a primary button use?
• Which color works for links?
• What happens on hover?
• Can people actually read the text?
• Does the palette still make sense in a shop, dashboard or mobile app?
• What should a designer or developer receive at the end?

That is the idea behind Qolorio.

A palette is not just a row of attractive swatches. It is a collection of colors with possibilities. Qolorio helps you decide which jobs the system actually needs.

A palette tells you which colors you have. Qolorio helps you decide what they should do.

Why we built it

Color tools are often either beautifully simple or impressively technical.

The simple ones can help you find five attractive colors, but often stop there.

The technical ones can give you every possible value, calculation and token while making you feel like you accidentally opened engineering software.

Qolorio aims for the space in between.

Powerful enough for designers and developers. Clear enough for anyone who simply wants better colors.

Our goal is not to make color more complicated.

It is to make good color decisions easier to see, test and use.

Color should be understandable without being oversimplified.

Technical information should be available without taking over the experience.

And experimenting with color should still be fun.

The Qolorio idea

Less guessing. More seeing. Better color decisions.

One palette. Four stages.

Create → Preview → Test → Export

Color Studio revolves around one palette and four connected stages.

They are not four separate tools with four separate versions of your colors.

They are four views of the same project.

Change a color in Create and that change follows into Preview, Test and Export.

Change how a semantic role is assigned and the rest of the project understands that change too.

That connection is the heart of Qolorio.

Create

Build and shape the palette.

Start from a color, image, Library palette, Surprise Me or colors you already have. Build and refine the Current palette yourself, choose its foundation and shape the first role setup until it feels ready for Preview.

Preview

Put the palette into context.

See what happens when your colors become backgrounds, surfaces, text, buttons, links, status messages and interface states. Inspect elements to understand which semantic roles are actually being used.

Test

Check whether those relationships work.

Qolorio tests key contrast and readability relationships from your color system – including text on page backgrounds and surfaces, links, actions and important states – rather than treating every possible pair of colors as equally useful.

Export

Take the useful part with you.

Export the palette, its semantic structure or visual reference files for the next stage of your project.

Create your palette

Start with what you know – even if that is already a complete palette.

Create is not only a palette generator.

You may already have one fixed brand color, several project colors or an existing palette that only needs a little help. Add those colors yourself, remove anything you do not need and edit individual values until the Current palette represents the system you actually want to work with.

Or let Qolorio give you a starting direction.

Color

Start with a color you already have in mind and let Qolorio build a palette direction around it.

Useful when a brand color, client color or personal favorite is already fixed.

Image

Extract a starting palette from an image.

Use this when a photograph, artwork, screenshot or other visual reference already contains the atmosphere or colors you want.

Library

Start from a ready-made Qolorio palette.

This is useful when you know the kind of direction you want but do not want to build the first set from scratch.

Surprise Me

Let Qolorio choose a coherent starting direction.

Use it when exploration matters more than control over the first color.

Or build the palette yourself

You are never required to accept a generated palette.

Add colors manually, remove colors you do not want and keep adjusting the set until it represents your project.

This is especially useful when you already have existing brand, product or interface colors and only need Qolorio to help turn them into a more complete system.

How many colors should you start with?

For many Studio projects, eight to ten colors is a strong starting point.

That gives Qolorio useful room for structure, text, actions, accents and feedback while keeping the palette manageable.

It is not a minimum.

A smaller palette can work perfectly well when several semantic roles share colors. Larger palettes can create more differentiation when the design genuinely needs it.

Studio supports up to 20 palette colors.

If your main goal is a much larger palette – for example dozens or even hundreds of colors for illustration, artwork, extensive brand collections, maps, games, color studies or another palette-first workflow – use our Color Palette Generator instead. It is designed specifically for palettes from 2 to 256 colors.

Open the Color Palette Generator

Work from the Current palette

After choosing or building a starting point, your active Current palette appears further down the Create page.

This is the palette that follows you through Preview, Test and Export.

Once you have a starting set, this is usually where the real refinement happens.

You can:

• add colors;
• remove colors;
• edit individual values;
• swap colors;
• lock colors you want to protect;
• inspect which roles use each color;
• change role assignments;
• restore edited colors from the source palette; and
• keep colors in reserve for later.

Reserve colors are allowed

Not every palette color needs a semantic job.

Qolorio may leave one or more colors in reserve when the current system does not need them.

That is intentional.

A reserve color can later become a new accent, feedback color, surface, action or other role when the project needs more differentiation. You can assign it yourself at any time.

Or simply leave it in the palette.

A palette can contain more possibilities than the current design needs.

Your palette has a structure

Qolorio gives every palette color a clear numbered position.

For example:

Color 01 · Soft Porcelain
#F4EBD0

Color 04 · Coastal Blue
#457B9D

The number shows the color’s current position in the palette.

The name makes it easier to recognize.

The code gives you its exact value.

And the semantic roles tell you what that color is currently doing.

No mysterious internal IDs.

No trying to remember whether #457B9D was the blue from card four or the other slightly different blue.

Number + name + code + purpose.

That is much easier to work with than a row of anonymous swatches.

Color names that make sense

A color code is precise. A good name makes the color easier to remember.

Qolorio uses the official CSS name when a color is an exact match.

CornflowerBlue [ CSS ]
#6495ED

For other colors, Qolorio creates an original descriptive name based on how the color actually looks.

Coastal Blue [ Qolorio ]
#457B9D

The name helps you recognize the color. The code keeps it exact.

A pale blue should still sound like a pale blue.

Choose a foundation

A palette can have its own character without containing the ideal page background or reading color.

Qolorio therefore lets you decide how much help you want with the foundation of the system.

Palette only

Keep the palette itself as the starting point. Qolorio assigns roles from the colors you chose without deliberately adding a near-white or near-black foundation.

Light canvas

Build the system around a very light background and a suitably dark reading color.

Dark canvas

Build the system around a very dark background and a suitably light reading color.

Qolorio first looks for suitable colors already in the palette. If the palette does not contain enough light–dark range, it can suggest a neutral support color that still fits the character of the palette.

With fewer than 20 colors, that support color can be added. At 20 colors, Qolorio asks before replacing an available palette color.

The choice is optional. If you want to control the background and text yourself, keep Palette only and adjust the roles manually.

The palette sets the character. The foundation helps it work.

Give colors a job

Colors are ingredients. Roles are the recipe.

Qolorio uses 31 semantic roles to describe real jobs that colors can perform in a design.

The roles are grouped by purpose.

The role names are not decoration.

They are the structure of the color system.

A color becomes much more useful when you know what it is for.

Fewer colors. Same system.

Fewer colors. Thirty-one jobs. Still no panic.

You do not need 31 different colors to use 31 semantic roles.

In fact, Qolorio palettes contain between 2 and 20 colors, so role sharing is a normal part of the system.

One palette color may serve several compatible roles. Another color may remain decorative or in reserve and have no semantic role at all.

That is not a compromise Qolorio is trying to hide. It is how practical color systems often work.

A single dark color may support headings, body text and borders. One accent may handle links, focus and selected states. A feedback color can stay dedicated when the project needs that distinction.

Roles describe the jobs. Palette colors decide how many employees you actually need.

More colors create more differentiation

As you add colors, Qolorio can give more roles their own dedicated color.

A hover state can become distinct from its normal state.

Warning and Error can separate.

Links can develop their own identity.

Background surfaces can become easier to distinguish.

More colors give Qolorio more room to separate roles, but even a 20-color palette still has 31 semantic jobs available. Some roles may continue to share a palette color, and that is perfectly valid when the design does not need them to look different.

That does not mean twenty colors are automatically better.

More colors are useful when they create meaningful distinction.

Not when they merely increase the headcount.

Every color should have a reason to be here.

Swap colors, not meaning

The semantic structure stays understandable while you experiment.

Suppose:

Color 01 – Page Background
Soft Porcelain
#F4EBD0

and

Color 04 – Accent
Coastal Blue
#457B9D

Now swap those two colors.

Color 01 – Page Background
Coastal Blue
#457B9D

and

Color 04 – Accent
Soft Porcelain
#F4EBD0

The colors moved.

The semantic structure stayed fixed.

That means you can ask:

What if this blue became the background?

and try it immediately without rebuilding the entire system.

Shape your palette

A palette is allowed to change its mind.

Qolorio lets you select, edit, add, remove, copy, lock and swap colors as the project develops.

You can regenerate colors you are not convinced by while protecting the ones you already like.

Undo and Redo give you room to experiment.

Lock colors

Keep the keepers. Rethink the rest.

A locked color is one you have decided should stay exactly as it is.

Lock it and continue experimenting around it.

Regenerate the palette and the locked color remains.

Locked means locked.

TIP:
Lock colors when you already know they are important to the project — for example a brand color, a carefully chosen neutral or simply a color you really do not want Qolorio to touch.

Color codes without the mystery

Every color can be described in several ways.

Qolorio keeps the most familiar formats close by:

HEX · RGB · HSL

and offers additional formats when you need them.

You do not need to understand every color space to use Qolorio.

Different formats are simply different numerical ways of describing color for different purposes.

A developer may want HEX or CSS values.

A designer may find HSL useful for editing.

A more advanced workflow may benefit from OKLCH.

The deeper science behind color formats belongs in the Qolorio color guides, so Studio itself does not need to turn into a textbook.

Put the swatches to work.

Swatches are polite. Real layouts ask harder questions.

A row of colors can look fantastic.

Then you place those colors into an actual interface and discover that:

• the background is exhausting;
• the body text is too weak;
• every button is shouting;
• the accent no longer feels special;
• Warning and Success look suspiciously similar.

Preview is where the palette stops posing and starts working.

Qolorio can place the same semantic system into different contexts, including:

• modern websites;
• minimal websites;
• e-commerce;
• dashboards;
• editorial layouts;
• documents;
• newsletters;
• presentations;
• mobile interfaces;
• social/app designs;
• art;
• voxel games;
• action games.

Each context asks different questions of the same palette.

Same palette. Different world.

Adjust semantic roles

Preview is not only something to look at.

It is also where you can refine what your colors actually do.

Choose a semantic role such as Accent and assign another available palette color.

Change that assignment and every Preview element that uses Accent should respond.

This is where Qolorio becomes more than a palette generator.

You are not only choosing colors.

You are building a small color system.

See where a color is used

A single palette color may serve several roles.

Qolorio can show you those connections.

Used for:

• Accent
• Accent Hover
• Link
• Link Hover
• Selected / Active
• Focus
• Information

That makes it easier to understand the consequences of changing one color.

A slightly darker blue might improve a link.

It may also change focus states, active navigation and information messages.

Color decisions travel. Qolorio helps you see where they go.

Typography changes the mood

Color never works entirely alone.

Typography changes how a palette feels.

The same colors can feel:

• editorial;
• technical;
• playful;
• serious;
• minimal;
• bold.

Font family, size and weight change hierarchy and visual character.

Qolorio lets you explore typography in Preview so you can judge the palette in something closer to a real design.

Same colors. Different attitude.

Preview your own world

Some previews benefit from a little more context.

A game interface, for example, is not just a collection of boxes.

It needs atmosphere.

Qolorio can combine semantic interface colors – health, objectives, warnings, actions and status – with different scene backgrounds.

You may also use your own local image where that helps you test the palette in a more relevant environment.

The background creates the scene.

The Qolorio color system controls the interface on top.

That separation matters.

Contrast is a relationship.

A color is not readable or unreadable by itself.

What matters is what sits behind it.

Dark gray may be perfectly readable on white and nearly disappear on dark blue.

Light text may work beautifully on a dark button while dark text is the better choice on a light one.

That is why Qolorio focuses on meaningful reading relationships rather than blindly testing every possible pair.

Examples include:

• Heading Text on Page Background
• Body Text on Page Background
• Body Text on Surface
• Text on Light Color on lighter actions and status colors
• Text on Dark Color on darker actions and status colors
• Link on Page Background

Studio Test uses WCAG 2.2 contrast calculations as a practical first indication for these key relationships. Qolorio uses 4.5:1 as a conservative AA target for its core text checks.

A passing result is useful evidence, not a complete accessibility audit. Typography, component design, focus visibility, use of color, content and the final implementation still matter.

Contrast belongs to the relationship, not the swatch.

Open the Color Contrast Checker

Accessibility is more than a number

Contrast ratios matter.

They are not the whole story.

Important information should not depend on color alone.

Instead of:

a red border

Prefer:

red border + error icon + clear message

A selected item can use color together with shape, position or an icon rather than requiring everyone to notice a subtle hue difference.

Qolorio can also provide visual simulations that help inspect whether important distinctions remain visible under different color-vision conditions.

For a deeper palette check, use the Color Vision & Palette Checker. It compares up to 20 colors across several color-vision simulations, looks for potential color collisions and provides a separate WCAG contrast matrix.

Open the Color Vision & Palette Checker

Note: Color-vision simulations are design aids, not medical diagnoses.

Use color to communicate. Do not make color carry the entire conversation.

Made to leave Qolorio.

A useful palette should not be trapped inside a color tool.

Once the system works, Qolorio can help you take it elsewhere.

Visual exports make the palette easy to share and reference.

Developer exports make it easier to implement.

Qolorio provides visual and technical exports such as:

• SVG Palette
• PDF Brandbook
• PNG Brandboard
• CSS
• SCSS
• JSON
• design tokens
• plain color values
• Accessibility Report
• Project TXT

Raw colors and semantic colors

There is an important difference.

A raw palette tells you what the colors are.

--color-04: #457B9D;

A semantic system also tells you what those colors are for.

--accent: var(--color-04);
--link: var(--color-04);
--focus: var(--color-04);

That extra layer becomes especially useful when a palette moves from visual exploration into development.

From swatch to system.

Save the project, not just the colors

A Qolorio project contains more than a list of HEX values.

It can also preserve information such as:

• the palette colors and their structure;
• the Base color;
• color locks;
• semantic role assignments and role locks;
• palette generation settings;
• typography;
• the selected Preview context;
• supported game Preview settings.

A custom local image used as a game Preview background is not embedded in the Project TXT file. If you return to the project later, you may need to select that local image again.

Saving the project means you can return to the decisions behind the palette instead of rebuilding them from a screenshot.

Color 04 deserves better than being remembered as:

“that blue one, somewhere around the middle.”

Browser save, snapshot or Project TXT?

Three ways to keep your work. Three different jobs.

Color Studio automatically tries to keep your current project in browser storage on this device.

That is convenient when you return to Studio in the same browser, but browser storage is not a permanent backup. It can disappear when browser data is cleared, storage is unavailable or the project format changes in the future.

Current browser project

Your active Studio project is saved automatically where browser storage is available.

Think of this as convenience, not archiving.

Snapshot

Choose Save snapshot when you want to keep a separate restore point before making bigger changes.

The snapshot is also stored in the browser.

It gives you somewhere to return to while experimenting, but it should not be treated as a permanent backup either.

Project TXT

Choose Project TXT when you want a downloadable copy of the editable Qolorio project.

You can import a compatible Project TXT later and continue working with its colors, roles and supported project settings.

Because Qolorio is still evolving, future versions cannot be guaranteed to support every older project file indefinitely.

Browser storage is convenient. A downloaded file is safer. A visual export is durable.

For an important palette, keep more than one version of the work.

Export the editable Project TXT, but also keep a durable representation such as an SVG Palette, PDF Brandbook or PNG Brandboard.

Even if an old editable project eventually becomes incompatible, those exports preserve the colors you chose.

Practical Qolorio workflow

Not sure where to begin? This is a good route.

1. Start with what you know
Bring existing colors, build a palette manually, start from Color, Image or Library, or use Surprise Me when you want a new direction.

2. Aim for a useful starting size
Eight to ten colors gives Studio plenty of room for a flexible starting system. Fewer colors can work when several roles share colors; add more when the project genuinely needs another distinction.

Need a much larger palette? Use Qolorio’s Color Palette Generator for palette-first workflows from 2 to 256 colors.

3. Choose the foundation
Keep the palette itself with Palette only, or choose a Light canvas or Dark canvas when the project needs a strong neutral reading foundation.

4. Find your Current palette
The active palette sits further down the Create page. This is the working set that follows you through Preview, Test and Export.

5. Shape the colors
Add, remove, edit, swap and lock colors until the set feels right. Existing project colors can stay exactly where you need them.

6. Review the roles
See which jobs Qolorio has assigned to the colors. Several roles may share one palette color, and some colors may remain in reserve.

7. Make your own choices
Reassign roles or bring a reserve color into the system whenever your project needs something different.

8. Continue to Preview
Once you are happy with the palette and its first role setup, move to Preview and see the same system in real designs.

9. Use the Preview Inspector
Click elements to discover which roles control their backgrounds, text, actions and states.

10. Test the important relationships
Check the key contrast and readability relationships where foreground and background colors actually interact.

11. Refine when necessary
Preview and Test are feedback, not final exams. Change a role or return to Create when the design needs improvement.

12. Export when the system works
Take the palette, semantic roles and useful visual or developer outputs into the next part of the project.

Start in Color Studio

More ways to start a color project

Color Studio is Qolorio’s main workspace when you are ready to build a complete color system. It is not the only useful place to begin. Different projects need different first moves.

Color DNA

Start with a feeling. Leave with a usable color.

Color DNA is a private, adaptive color diagnosis for a person, brand or project. It turns intention, atmosphere and visual expression into one exact core color with a nearby color territory.

Useful when the project begins with one meaningful color rather than a complete palette.

Find your Color DNA

Live Canvas

See a color direction doing its job.

Preview ten essential website color roles in a live website, story, workspace and shop. Change colors, type, light and dark mode and responsive width; then check the key relationships in use.

Useful when a palette looks promising and you want to see how it behaves in a website before deciding whether to develop it further in Color Studio.

Open Live Canvas

Color Palette Generator

Explore the palette before the system.

Generate and refine palettes from 2 to 256 colors. Start from a color, harmony, mood, image or a new surprise; then keep exploring without having to assign every value to an interface role.

Useful when you need a larger palette, a palette-first creative workflow or more room to explore color families before narrowing the work down.

Open Color Palette Generator

Image Color Picker

Find the colors already hiding in the image.

Extract colors automatically from a photo, illustration or screenshot, or choose the exact places that matter to you. Lock good discoveries and continue refining the palette.

Useful when photography, artwork, product imagery or a screenshot contains the atmosphere you want to carry forward.

Open Image Color Picker

Color Match

Bring one color. Give it useful company.

Start with a fixed color and let Qolorio suggest a readable text color, background, surface, border, accent and high-contrast partner around it. Choose a vibe when you want the suggestions to feel calmer, bolder, warmer, cooler, more elegant or more playful.

Useful when you have one fixed brand or project color and need a practical direction quickly.

Open Color Match

Roblox Color Palette Builder

Build the right world.

Find Roblox-first colors by material, surface or theme; copy HEX, RGB and Color3 values, build your own palette and export it for your game.

Useful when the color work belongs to a Roblox game, world or UI rather than a general website system.

Open Roblox Color Palette Builder

Focused tools and checks

Sometimes you do not need to open a project at all. You only need to solve one color task well.

Color Converter

One color. Several languages.

Convert between familiar and advanced color formats.

Useful when you already have the color but need a different representation.

Open Color Converter

Color Mixer

See what happens in between.

Mix two colors and explore the colors they create together.

Useful for intermediate colors, experiments and simply satisfying your curiosity.

Open Color Mixer

Color Explorer

Take one color somewhere interesting.

Explore harmonies, families, related colors and mixing possibilities from a single starting point.

Useful when you want to understand where one color can go without committing to a whole palette yet.

Open Color Explorer

Color Contrast Checker

Two colors. One important relationship.

Check foreground and background contrast directly without building a complete palette.

Useful when you need to inspect one real color relationship with clear WCAG guidance.

Open Color Contrast Checker

Color Vision & Palette Checker

See where colors may lose distinction.

Compare up to 20 colors across common color-vision simulations, look for potential color collisions and inspect the original palette in a WCAG contrast matrix.

Useful when color carries meaning in interfaces, charts, status systems, games or other visual designs.

Open Color Vision & Palette Checker

Color Extractor from Code

Turn scattered color values into a palette you can use.

Paste or upload HTML, CSS or code and let Qolorio find the literal colors inside it. Matching values are grouped, source locations stay visible and review signals help you spot duplicates, one-off values and possible contrast issues.

Useful when you are inheriting a website, auditing a build or turning an existing codebase into a deliberate starting palette.

Open Color Extractor from Code

CSS Color Names

The colors browsers know by name.

Browse standard CSS named colors, inspect their values and take them into Qolorio.

Explore CSS Color Names

Color Charts

Useful color references, ready to copy.

Browse useful color systems and representations without having to remember every code.

Explore Color Charts

Find a starting point

Sometimes the job is not to solve a color problem yet. It is simply to find a direction worth exploring.

Color Palette Library

Find a good place to start.

Browse Qolorio palettes, adjust the number of colors and bring the ones you like into Studio.

Browse the Color Palette Library

Color Palette Inspiration

Find a direction, then make it useful.

Browse 8-color palette ideas, copy the HEX codes or send a palette straight into Studio. Use it when Pinterest, a mood or a visual reference is your starting point.

Browse Color Palette Inspiration

What Qolorio is not trying to do

Qolorio is not here to tell you that there is one mathematically perfect palette.

There is not.

Context matters.

Taste matters.

Culture matters.

Brand matters.

Accessibility matters.

Sometimes the technically obvious choice is not the visually interesting one.

Sometimes the visually interesting choice needs a little technical help.

Qolorio is designed to help you see those trade-offs.

Not to make every decision for you.

The numbers can guide the decision. They do not have to make the decision.

Color should be useful. It should also be fun.

Color can become technical very quickly.

We can measure it.

Convert it.

Interpolate it.

Calculate contrast.

Assign semantic tokens.

All useful.

But color is also the reason a page can feel calm, energetic, warm, strange, elegant or unmistakably yours.

That part matters too.

Qolorio aims to keep both sides together:

The precision and the play.

A palette can be technically sound without being boring.

A color tool can be powerful without feeling like accounting software.

And sometimes a color really does deserve a name like Coastal Blue.

Nice swatches. Now make them work.

Open Color Studio