Color Studio — Complete Guide
This page collects the guides for 9 tools in one place. Pick a tool name from the list and its guide opens beside it, so there is no page to navigate to and no account to create.
Color Picker
Pick colors and inspect HEX, RGB, and HSL values. Part of Color Studio.
How to use it
- Choose a colour with the native picker, or type a HEX value directly.
- Read the HEX, RGB, and HSL values shown together.
- Copy whichever format the property you are editing expects.
Use cases
- Pulling the exact brand colour from a screenshot into a CSS file.
- Reading a colour you can see but cannot name.
- Confirming a colour a designer sent you matches what they described.
Limitation — Uses the browser color input and does not provide a screen-wide eyedropper or alpha-channel values.
Color Converter
Convert HEX colors to RGB and HSL values. Part of Color Studio.
How to use it
- Enter a hex value or open the colour picker and choose visually.
- Read the RGB and HSL values that appear alongside it.
- Copy whichever notation the target format needs.
Use cases
- Translating a colour picked by eye into a CSS variable.
- Getting the RGB channels a canvas or canvas-based animation needs.
- Checking a value copied from a design file for a typo before using it.
Limitation — Supports hexadecimal color input and rounded RGB/HSL output; it does not process image files or alpha channels.
Get Colors From Image
Extract dominant colors from an image in your browser.
How to use it
- Choose a photo.
- Wait for the analysis to finish.
- Copy any hex value you want, then note the coverage share beside it.
Use cases
- Deriving a matching colour scheme from a brand photograph.
- Checking the mood of an image before choosing text colour to overlay it.
- Sampling a colour from a reference image to feed into a design tool.
Limitation — Returns an approximate dominant-color palette, not exact colors from every image region.
Blend Colors
Blend two colors with an adjustable ratio. Part of Color Studio.
How to use it
- Enter two hex values for colour A and colour B.
- Move the slider to set how much of colour B to mix in.
- Copy the resulting hex value.
Use cases
- Producing hover and pressed states from a single brand colour.
- Creating a gradient's midpoint colour to hand to a designer.
- Fading a call-to-action button toward its background.
Limitation — Uses simple RGB mixing with a rounded result rather than perceptual or OKLCH color mixing.
Complementary Colors
Find the complementary color for any HEX color. Part of Color Studio.
How to use it
- Enter a hex colour.
- Read the complementary value beside it.
- Copy the hex value you need.
Use cases
- Starting a two-colour palette from an existing brand hue.
- Choosing a colour for a progress bar that contrasts with its track.
- Producing a deliberate clash for an experimental layout.
Limitation — Calculates the HSL hue opposite the input; it is not an RYB, CMYK, or perceptual complement.
Analogous Colors
Create neighboring colors on the color wheel. Part of Color Studio.
How to use it
- Enter a hex colour.
- Read the left neighbour, the base, and the right neighbour.
- Copy the values you want into your palette.
Use cases
- Building a chart palette that feels like one system.
- Choosing background gradients that will not fight with a logo.
- Producing highlight, base, and shade variants for a landing page.
Limitation — Creates neighboring hues around the input using a fixed HSL offset; it is not a full color-wheel analysis.
Monochromatic Colors
Create darker shades from one color. Part of Color Studio.
How to use it
- Enter a base hex colour.
- Read the four intensities from 25 to 100 percent.
- Copy the value for the role you need, background or text.
Use cases
- Picking a background tint that relates to a brand colour.
- Building a simple ramp for a bar chart or a progress indicator.
- Choosing a hover shade from an existing base colour.
Limitation — Provides fixed darker shades from a base color rather than a full perceptual light-to-dark scale.
Invert Color
Invert RGB channel values in a HEX color. Part of Color Studio.
How to use it
- Enter a hex colour.
- Read the inverted value.
- Copy it, or use the colour converter if you wanted a lighter or darker shade instead.
Use cases
- Creating an image-mode effect by inverting a whole screenshot.
- Producing a colour for a filter or overlay in a light theme.
- Checking which regions of an image are affected by an inversion.
Limitation — Inverts RGB channels as 255 minus each channel; it is not the same operation as finding an HSL complement.
Greyscale
Convert a color to its greyscale equivalent. Part of Color Studio.
How to use it
- Enter a hex colour.
- Read the grey hex value.
- Copy it for the style or comparison you need.
Use cases
- Checking what a brand colour looks like in monochrome.
- Preparing a fallback colour for an image that fails to load.
- Converting chart colours for a black and white print run.
Limitation — Uses a fixed luminance formula and does not include adjustable contrast or image editing controls.
All Loonix tools process your input in the browser: text you type and files you pick never leave your device. Anything downloaded from the internet — say the FFmpeg runtime — is a supporting binary, not your data.
