Color Picker
Pick any color, copy its codes, build palettes, and check contrast for accessibility.
Palettes
Click any chip to load it. Shades are made by rotating the hue.
Complementary
Analogous
Triadic
Contrast checker
Sample text on sample background
Ratio: — · AA normal: — · AA large: — · AAA: —
Recent colors
How to use the color picker
- Pick a color. Use the native picker, click the swatch, or type a HEX, RGB, or HSL value directly.
- Copy the code. Each format has its own Copy button — paste straight into CSS or a design tool.
- Explore palettes. Complementary, analogous, and triadic rows are generated from your color; click a chip to load it.
- Check contrast. Pick a text and background color to see the WCAG ratio and whether it passes AA and AAA.
Frequently asked questions
What is the difference between HEX, RGB, and HSL?
They are three notations for the same color. HEX is the six-digit code CSS uses most (#4B3575). RGB gives the red, green, and blue channels (0–255 each). HSL gives hue (0–360°), saturation, and lightness — the most intuitive for adjusting a color by hand.
How are the palette suggestions generated?
By rotating the color's hue on the color wheel: complementary shifts 180°, analogous shifts ±30°, and triadic shifts 120° and 240°. Saturation and lightness stay the same.
What do the WCAG contrast ratios mean?
The ratio of relative luminance between text and background, from 1:1 to 21:1. WCAG requires 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for the stricter AAA level.
How do I copy a color?
Press the Copy button next to any code format, or click a palette chip to load it into the fields first. Colors also save to your recent-colors strip for quick reuse.
Are my colors saved anywhere?
Only in your own browser's local storage, as a recent-colors strip. Nothing is sent to a server.
More from the codex
Color Picker
HEX/RGB/HSL codes, palettes, contrast checker.
Citation Generator
Accurate citations in APA 7th, MLA 9th, Chicago, and Harvard. Websites, books, journals, YouTube — with URL, DOI, and ISBN auto-lookup.
Open tool → LiveGPA Calculator
Semester and cumulative GPA with weighted scales, plus a planner that tells you exactly what you need to hit your target.
Open tool → LiveWord Counter
Count words and estimate reading time instantly.
Open tool → LiveGrade Calculator
“What do I need on my final?” — answered.
Open tool → LivePomodoro Timer
Focus sessions with clean, simple timing.
Open tool → LiveRandom Student Picker
Fair, no-repeat classroom picker for teachers.
Open tool → LiveScientific Calculator
Trig, logs, powers, factorials — full keypad.
Open tool → LivePercentage Calculator
Percent of, percent change, increase/decrease.
Open tool → LiveUnit Converter
Length, weight, temperature, and more.
Open tool → LiveTyping Speed Test
Measure your words per minute and accuracy.
Open tool → LiveStudent Budget Calculator
Plan spending on a student budget.
Open tool → LiveAttendance Calculator
How many classes can you miss and still pass?
Open tool → LiveTip Calculator
Split the bill fairly in seconds.
Open tool → LivePassword Generator
Strong, random passwords on demand.
Open tool → LiveCase Converter
UPPER, lower, Title Case and more.
Open tool → LiveCountdown Timer
Count down to exams, deadlines, events.
Open tool → LiveFlashcard Maker
Spaced-repetition flashcards for any subject.
Open tool → LiveResume Builder
Clean templates, export to PDF.
Open tool → LivePDF Tools
Merge and compress PDFs for submissions.
Open tool → LiveTimetable Maker
Build your weekly class schedule.
Open tool → LiveText-to-Speech Reader
Hear your essay read aloud for proofreading.
Open tool → LiveAge Calculator
How old are you, exactly? Years, months, days.
Open tool → LiveDate Calculator
Days between dates, plus date arithmetic.
Open tool → LiveBMI Calculator
Body mass index with healthy-range guidance.
Open tool → LiveLoan Calculator
Monthly payments, interest, amortization table.
Open tool → LiveCompound Interest Calculator
Project savings growth with contributions.
Open tool → LiveQR Code Generator
Free QR codes for URLs and text. PNG download.
Open tool → LiveJSON Formatter
Validate, format, and minify JSON.
Open tool → LiveLorem Ipsum Generator
Placeholder text by paragraph or word.
Open tool → LivePeriodic Table
Interactive table of all 118 elements.
Open tool → LiveTime Zone Converter
Convert times across zones; plan meetings.
Open tool → LiveRandom Number Generator
Random numbers, dice, coin flip, shuffler.
Open tool → LiveStopwatch
Precision stopwatch with lap times.
Open tool → LiveBase64 Encoder
Encode and decode Base64, URL-safe too.
Open tool → LiveFancy Text Generator
Bold, italic, script and 12 more unicode styles.
Open tool → LiveURL Encoder / Decoder
Encode/decode URLs and parse query strings.
Open tool → LiveInvoice Generator
Professional invoices with tax, discounts, print.
Open tool → LiveUnix Timestamp Converter
Convert timestamps to dates and back.
Open tool → LiveMetronome
Steady beats with tap tempo, 30-240 BPM.
Open tool →Support the codex
This tool is free, with no account and no ads. If it saved you some time, consider supporting the indie dev behind it.