Pixie
Converter

Pixie Color Picker

Pick any color and instantly get its HEX, RGB, and HSL codes, ready to copy into your CSS, design tool, or brand palette. Tap the generated shades and tints to explore lighter and darker variants. Everything runs in your browser.

HEX#22C55E
RGBrgb(34, 197, 94)
HSLhsl(142, 71%, 45%)
Shades & tints
Need a fast, well-designed website?
Pixie builds full sites in 60 seconds โ€” text us on WhatsApp.
Continue on WhatsApp

Tip: tap a shade to make it the active color, then copy the HEX, RGB, or HSL value for your CSS, design tool, or brand palette.

How the Color Picker works

Three simple steps. No signup. No installation.

1

Pick a color

Use the color picker or type a HEX value directly.

2

Copy the code

Grab the HEX, RGB, or HSL value with one tap.

3

Explore shades

Tap a generated shade or tint to make it the active color.

How computers describe color

Every color on a screen is made by mixing three lights โ€” red, green, and blue โ€” and the different "color codes" you run into are just different ways of writing down that mix. RGB is the most literal: three numbers from 0 to 255 saying how much of each light to use, so pure red is rgb(255, 0, 0). HEX is the same information in a shorter, hexadecimal form โ€” #FF0000 is that same red โ€” which is why it became the standard in CSS and design tools where compactness matters. HSL takes a different, more human angle: instead of light amounts, it describes a color by its hue (its position on the color wheel, 0โ€“360ยฐ), its saturation (how vivid versus grey), and its lightness (how close to white or black). That last model is the designer's friend, because to make a set of shades and tints that belong together you simply hold the hue and saturation steady and slide the lightness up and down โ€” which is exactly what the swatch strip in this tool does. Understanding that these are interchangeable views of one color is what lets you move fluidly between a brand guideline that lists HEX codes, a CSS file, and a design app that prefers HSL. A good palette is built on this: a primary hue, a few tints and shades for backgrounds and hover states, and enough lightness contrast between text and background to stay readable โ€” an accessibility requirement, not just an aesthetic one, since low-contrast text fails real users and automated audits alike. This picker gives you all three codes for any color at once and the shade ramp to build from, so whether you are writing CSS, filling a Figma swatch, or documenting a brand, you can copy the exact value you need.

Explore all free tools

59 no-signup tools โ€” scroll a shelf and open any of them.

Generators

30
Laptop displaying a secure ecommerce checkout with trust signalsGenerator

Trust Badge Generator

Generate trust badges for your online store in seconds.

Hand-lettered calligraphy and typography artworkGenerator

Ambigram Generator

Create ambigram designs that read the same upside down.

Handwritten baby name list in a notebook with a penGenerator

Middle Name Generator

Generate perfect middle name ideas based on first and last name.

Colorful neon typography and lettering on a dark wallGenerator

Fancy Text Generator

Turn plain text into dozens of cool fonts you can copy and paste anywhere.

Blurred, distorted black-and-white portraitGenerator

Glitch Text Generator

Create creepy zalgo and cursed glitch text with an adjustable intensity.

Soft pink hearts and decorative symbols on a pastel backgroundGenerator

Heart Symbol Generator

Tap to copy hearts, stars, and aesthetic text symbols for any platform.

Drawers of vintage metal letterpress typeGenerator

Tiny Text Generator

Shrink your words into tiny superscript, subscript, and small-caps text.

A child hanging upside downGenerator

Upside Down Text Generator

Flip your text upside down to copy and paste anywhere.

A blank white sheet of paper on a wooden tableGenerator

Invisible Text Generator

Copy invisible blank characters for empty messages, names, and bios.

Bold block lettering on a billboard against a brick wallGenerator

Bold Text Generator

Make real bold text that stays bold when you copy and paste it.

A hand marking white paper with a red penGenerator

Strikethrough Text Generator

Cross out your text with strikethrough, slash, and underline styles.

A printed document resting on office stationeryGenerator

Text Summarizer

Paste any text and get a clear AI summary with key points.

A person writing in a notebook beside a laptopGenerator

AI Text Humanizer

Rewrite stiff or AI-sounding text so it reads naturally human.

Glitchy distorted typography on a dark screenGenerator

Zalgo Text Generator

Turn normal text into creepy, glitchy zalgo text.

Eerie distorted lettering glowing in the darkGenerator

Cursed Text Generator

Generate creepy cursed text with one click presets.

Letters reflected in a mirror on a clean deskGenerator

Backwards Text Generator

Reverse text by letters, words, or lines instantly.

Colorful stylized 3D text logo on a gradient backgroundGenerator

Cool Text Generator

Design cool text logos with neon, gradient, and 3D styles.

A spread of different dishes on a tableGenerator

Random Food Generator

Can't decide what to eat? Let the generator pick.

Colorful emoji icons scattered on a bright backgroundGenerator

Random Emoji Generator

Generate random emojis to copy and paste anywhere.

Game controller glowing on a dark desk setupGenerator

Xbox Gamertag Generator

Generate cool gamertag and username ideas instantly.

Norse longship and shields by a misty fjordGenerator

Viking Name Generator

Generate authentic-sounding Norse Viking names.

Silhouette of a caped hero against a dramatic skyGenerator

Superhero Name Generator

Generate epic superhero names and alter egos.

A white comic speech bubble over a photoGenerator

Speech Bubble Meme Generator

Add a classic reaction speech bubble to any image.

Glowing letters made of flames on a dark backgroundGenerator

Fire Text Generator

Turn text into blazing fire and flame graphics.

Pirate ship sailing under a skull-and-crossbones flagGenerator

Pirate Name Generator

Generate swashbuckling pirate names and aliases.

Cherry blossoms against a soft pastel skyGenerator

Anime Name Generator

Generate anime-style Japanese names for characters.

A team reviewing goals on a whiteboardGenerator

Mission Statement Generator

Write a clear company mission statement in seconds.

A padlock over a field of codeGenerator

Password Generator

Generate strong, random passwords that stay in your browser.

A storefront sign being designedGenerator

Business Name Generator

Generate brandable business name ideas in seconds.

A bold marketing tagline on a posterGenerator

Slogan Generator

Generate catchy slogans and taglines for your brand.

Calculators

19
House keys resting on a mortgage contract with a calculatorCalculator

Mortgage Calculator

Calculate your monthly mortgage payment and full amortization.

Math notebook with geometry equations, compass and rulerCalculator

Midpoint Calculator

Find the midpoint between two coordinates with steps.

Chemistry lab with test tubes and colored solutionsCalculator

AP Chem Score Calculator

Predict your AP Chemistry score from practice exam results.

Clean backyard swimming pool with clear blue waterCalculator

Pool Salt Calculator

Calculate exactly how much salt your saltwater pool needs.

Stock market financial chart on a screenCalculator

SIP Calculator

Calculate your UK Share Incentive Plan tax savings.

Birthday cake with lit candles and festive decorationsCalculator

Half Birthday Calculator

Find your half birthday โ€” exactly 6 months from your birth date.

Biology textbook open to DNA double helix diagramCalculator

AP Bio Score Calculator

Predict your AP Biology score from practice exam results.

Calculus textbook open with mathematical equations and graphsCalculator

AP Calc AB Score Calculator

Predict your AP Calculus AB score from practice exam results.

Psychology textbook with brain diagram and neural network illustrationCalculator

AP Psych Score Calculator

Predict your AP Psychology score from practice exam results.

Student with diploma and graduation ceremonyCalculator

Calculator Bacalaureat

Calculeazฤƒ media de absolvire a examenului de bacalaureat.

Small aircraft on a runway with a wind sock blowing sidewaysCalculator

Crosswind Calculator

Calculate crosswind and headwind components for any runway.

Basketball player dunking over a defender in a gymCalculator

Dunk Calculator

Find out if you can dunk โ€” and exactly how high you need to jump.

Powerlifter mid-deadlift with a loaded barbell in a gymCalculator

DOTS Calculator

Score your powerlifting total across any bodyweight.

Baseball pitcher throwing from the mound during a gameCalculator

ERA Calculator

Calculate a pitcher's earned run average in seconds.

Colorful anime-style characters in racing uniformsCalculator

Uma Affinity Calculator

Check breeding compatibility before you pick inherit parents.

SEO analytics dashboard showing website authority and ranking metricsCalculator

DA / PA Checker

Check any website's authority score in seconds โ€” free, no signup.

A writer typing on a laptop with text on screenCalculator

Word Counter

Count words, characters, sentences, and reading time live.

A calendar with a date circledCalculator

Age Calculator

Find your exact age in years, months, and days.

A measuring tape and scaleCalculator

BMI Calculator

Calculate your Body Mass Index in metric or imperial.

Converters

10
Need more than a tool?

Your full website, built by a WhatsApp chat.

Building a brand palette? Pixie turns it into a full website and identity โ€” text us on WhatsApp.