QuackyardColor Palette Generator
Pick one colour and get its harmonies, a Tailwind-style 50-to-950 scale, contrast ratios and paste-ready CSS.
Harmony
Swatches
Click a swatch to copy its hex.
Scales
base hue 250.43°
analogous-1 hue 280.43°
analogous-2 hue 220.43°
Every colour
| Colour | Hue | HEX | RGB | OKLCH | On white | On black |
|---|---|---|---|---|---|---|
| base | 250.43° | #336699 | rgb(51 102 153) | oklch(49.93% 0.0987 250.43) | 6:1 | 3.5:1 |
| analogous-1 | 280.43° | #595b9a | rgb(89 91 154) | oklch(49.93% 0.0987 280.43) | 6.2:1 | 3.39:1 |
| analogous-2 | 220.43° | #006e87 | rgb(0 110 135) | oklch(49.93% 0.0912 220.43) | 5.87:1 | 3.58:1 |
Brought into sRGB
6 colours here asked for more chroma than sRGB holds, so the chroma was reduced until they fit. Hue and lightness are left where they are, which is what CSS Color 4 does; clamping the channels instead would have shifted the hue.
CSS custom properties
:root {
--base-50: #eef6ff;
--base-100: #c5e1ff;
--base-200: #a3caf4;
--base-300: #85b4e5;
--base-400: #6a9dd2;
--base-500: #5387bc;
--base-600: #4071a4;
--base-700: #315c88;
--base-800: #26486b;
--base-900: #1e354d;
--base-950: #19232d;
--analogous-1-50: #f3f4ff;
--analogous-1-100: #d6daff;
--analogous-1-200: #bdc1f5;
--analogous-1-300: #a4a9e6;
--analogous-1-400: #8e92d3;
--analogous-1-500: #787cbd;
--analogous-1-600: #6467a5;
--analogous-1-700: #515389;
--analogous-1-800: #3f416c;
--analogous-1-900: #2e304d;
--analogous-1-950: #1f202d;
--analogous-2-50: #e7f9ff;
--analogous-2-100: #b9e6f5;
--analogous-2-200: #91d2e7;
--analogous-2-300: #6cbcd6;
--analogous-2-400: #4aa7c2;
--analogous-2-500: #2b90ac;
--analogous-2-600: #0c7a95;
--analogous-2-700: #00647b;
--analogous-2-800: #004e61;
--analogous-2-900: #0d3946;
--analogous-2-950: #14242a;
}Tailwind colors
colors: {
base: {
50: '#eef6ff',
100: '#c5e1ff',
200: '#a3caf4',
300: '#85b4e5',
400: '#6a9dd2',
500: '#5387bc',
600: '#4071a4',
700: '#315c88',
800: '#26486b',
900: '#1e354d',
950: '#19232d',
},
'analogous-1': {
50: '#f3f4ff',
100: '#d6daff',
200: '#bdc1f5',
300: '#a4a9e6',
400: '#8e92d3',
500: '#787cbd',
600: '#6467a5',
700: '#515389',
800: '#3f416c',
900: '#2e304d',
950: '#1f202d',
},
'analogous-2': {
50: '#e7f9ff',
100: '#b9e6f5',
200: '#91d2e7',
300: '#6cbcd6',
400: '#4aa7c2',
500: '#2b90ac',
600: '#0c7a95',
700: '#00647b',
800: '#004e61',
900: '#0d3946',
950: '#14242a',
},
}Paste into theme.extend.
More in the yard
- ASCII TableEvery ASCII character with its decimal, hex, octal, binary and HTML code, and a lookup for any character.
- Base64 Encoder & DecoderEncode text to Base64 and decode it back, in the standard or URL-safe alphabet, without your text leaving the page.
- Bit FlipFlip bits until the board makes the target number: twelve levels from place values to hex, masks and shifts.
- Bitwise CalculatorWork out AND, OR, XOR, NOT and shifts at any width, and see every bit of both operands and the answer.
- Box Shadow GeneratorDesign CSS box shadows layer by layer, preview them, and copy the value with a matching Tailwind class.
- Case ConverterConvert text between camelCase, PascalCase, snake_case, kebab-case, Title Case and more, and make a URL slug.
- chmod CalculatorConvert Unix permissions between octal and symbolic notation, special bits included.
- CIDR & Subnet CalculatorWork out what an IPv4 or IPv6 block covers, split it into subnets, and check whether an address is inside it.
- Code TypingA typing test with real code instead of prose: ten snippets in ten languages, brackets, quotes and all.
- Color Converter & Contrast CheckerConvert a colour between HEX, RGB, HSL and OKLCH, and check two colours against WCAG.
- Cron BuilderRead and write cron expressions in plain English, with the next run times in any timezone.
- CSP BuilderBuild a Content-Security-Policy header, or paste one to see what it allows and where it is weak.
- CSS FormatterFormat or minify CSS, with strings, url()s and custom properties kept exactly as written.
- CSS Gradient GeneratorBuild linear, radial and conic gradients by eye: drag the colour stops, try a preset and copy the CSS.
- CSS SelectorsWrite one CSS selector that picks exactly the elements a level highlights, in as few characters as you can.
- CSV ↔ JSON ConverterConvert between CSV and JSON: RFC 4180 quoting, an auto-detected delimiter, typed values, and a preview of the table.
- curl to Code ConverterTurn a curl command into JavaScript, Python, Go or PHP, with the request it builds and every flag left out.
- Data Size ConverterConvert bits, bytes, kB and MB against KiB, MiB and GiB exactly, and time a download.
- Date CalculatorCount the days between two dates, and add or subtract days, weeks, months and years.
- docker run to Compose ConverterTurn docker run commands into a compose.yaml service, and a Compose file back into commands, flag by flag.
- Flexbox YardLearn CSS flexbox by writing the declarations that move the ducks onto their ponds, judged by a real flex layout.
- Git QuestLearn Git branching by typing real commands and watching the commit graph change until it matches the goal.
- Gitignore GeneratorBuild a .gitignore for your stack, and check whether a path would be ignored.
- Hash GeneratorHash text with MD5, SHA-1, SHA-256, SHA-384 and SHA-512 at once, and check a hash against it.
- Hex Color GameSee a colour, guess its hex code: ten levels from greys to near-miss pairs, judged by CIEDE2000.
- HMAC GeneratorSign a message with a secret key — HMAC over SHA-256, SHA-512, SHA-1 or MD5 — and check a signature against it.
- HTML Entity Encoder & DecoderEscape text into HTML entities and read them back, named where a name exists and numeric otherwise.
- HTML FormatterFormat or minify HTML, keeping script, style, pre and textarea exactly as written.
- HTTP Status CodesLook up any HTTP status code: what it means, when to use it, and what clients do with it.
- ISO 8601 Duration ConverterRead and write ISO 8601 durations like P1DT2H30M, and convert them to seconds and back.
- jq TrainerLearn jq by writing the filter that pulls the target out of a JSON document, in as few characters as you can.
- JSON DiffCompare two JSON documents by path and copy the JSON Patch that turns one into the other.
- JSON Formatter & ValidatorFormat, minify and check JSON, and see the exact line and column where it breaks.
- JSON to GoTurn a JSON sample into Go structs with json tags, ready to paste into a file.
- JSON to TypeScriptTurn a JSON sample into TypeScript interfaces or type aliases, with a Zod schema when you want one.
- JSON ↔ YAML ConverterConvert between JSON and YAML: anchors resolved, multi-document files handled, and output that round-trips.
- JSONPath TesterRun a JSONPath expression over your JSON and see every value it selects, at the path it lives at.
- JWT DecoderDecode a JSON Web Token in your browser and read its header, claims and expiry in plain words.
- JWT EncoderSign a JSON Web Token with HMAC — edit the header and the claims, pick HS256, HS384 or HS512.
- Lorem Ipsum GeneratorGenerate classic Lorem Ipsum or developer-flavoured filler, by the paragraph, sentence or word.
- Markdown Editor & PreviewWrite Markdown, see it rendered, and copy the HTML.
- Markdown Table GeneratorDraw a table in a grid, or paste CSV, TSV or a spreadsheet selection, and copy clean Markdown back out.
- MIME Type LookupLook up the MIME type for a file extension, or the extensions for a MIME type.
- Number Base ConverterConvert a number between binary, octal, decimal, hex and any base from 2 to 36, however big it is.
- Password GeneratorMake strong passwords and passphrases from your browser’s own randomness, and check how strong a password is.
- PX to REM ConverterConvert px, rem, em, pt and % in both directions, at any root font size.
- QR Code GeneratorMake a QR code for a link, Wi-Fi, an email or a phone number, and download it as SVG or PNG.
- Random String GeneratorDraw random strings, tokens and IDs in your browser: hex, base64url, NanoID, ULID, or an alphabet of your own.
- Regex CrosswordA crossword whose clues are regular expressions: fill the grid so every row and every column matches its pattern.
- Regex TrainerLearn regular expressions one level at a time: match one list, skip the other, in as few characters as you can.
- Robots.txt TesterCheck a robots.txt: would this crawler be allowed to fetch this URL, and which rule decided?
- Semver Range CheckerCheck which versions satisfy an npm semver range, and read what the range means in plain words.
- Shell PipesBuild Unix pipelines that turn a log, a CSV or a word list into the target output, in as few characters as you can.
- SQL DetectiveSolve a yard mystery with SQL: ten levels of queries against a small database, in as few characters as you can.
- SQL FormatterFormat SQL for reading, or minify it, in the dialect you use.
- String Escape & UnescapeEscape and unescape strings for JSON, JavaScript, Java, C#, Python, SQL, regex, the shell and CSV.
- SVG OptimizerStrip editor junk, round coordinates and shorten path data, and see both drawings side by side.
- Text to Binary ConverterConvert text to binary, hex, decimal or octal bytes, and back — UTF-8, UTF-16 or ASCII, without leaving the page.
- Diff CheckerCompare two texts line by line, word by word or character by character, and copy the unified diff.
- Time Zone ConverterConvert a date and time between time zones, and see it in several at once.
- TOML ↔ JSON ConverterConvert between TOML and JSON: tables, arrays of tables, dotted keys and every value kind, with errors that point.
- Unix Timestamp ConverterTurn Unix timestamps into dates and back, in any timezone.
- URL Encoder & DecoderPercent-encode text for URLs, decode it back, and take a URL apart into its pieces.
- User Agent ParserRead a User-Agent string: browser, engine, operating system, device, and whether it is a known crawler.
- UUID Generator & DecoderGenerate version 4 and 7 UUIDs, or take any UUID apart: its version, its variant, and when a time-based one was made.
- Vim MovesLearn Vim by editing: turn the buffer into the target in as few keystrokes as you can.
- Word CounterCount words, characters, sentences and paragraphs as you type, with reading and speaking time.
- XML Formatter & ValidatorFormat, minify and check XML, and point at the exact spot where it breaks.
- YAML Validator & FormatterFind the line where YAML breaks, warn about the traps that change what it means, and reformat it with comments kept.