# PickShade > Color tools for designers and developers: formats, contrast, palettes, Tailwind. No ads. No sign-up. Analytics cookies only with your consent. Color math follows CSS Color 4: sRGB, Display P3, Rec. 2020, Lab, LCH, Oklab and OKLCH, with gamut mapping in OKLCH, WCAG 2 contrast and APCA. Full text for language models: https://pickshade.com/llms-full.txt ## Guides - [OKLCH explained: the color format that finally matches your eyes](https://pickshade.com/oklch): What OKLCH is, how lightness, chroma and hue work, why equal lightness really looks equal, browser support, gamut limits and how to convert HEX to OKLCH. Markdown: https://pickshade.com/oklch.md - [APCA vs WCAG 2: which contrast check to trust](https://pickshade.com/apca-vs-wcag): How the WCAG 2 contrast ratio and APCA Lc work, the thresholds for body text and headings, a real example where they disagree, and which one to use for compliance. Markdown: https://pickshade.com/apca-vs-wcag.md - [Color gamut explained: sRGB, Display P3 and out-of-gamut colors](https://pickshade.com/gamut): What a color gamut is, how sRGB, Display P3 and Rec. 2020 compare, how browsers show colors a screen cannot display, and how to use P3 colors safely in CSS. Markdown: https://pickshade.com/gamut.md - [Color formats explained: HEX, RGB, HSL, OKLCH and the rest](https://pickshade.com/color-formats): Every common color format with a live example: HEX, RGB, HSL, HWB, LAB, LCH, OKLAB, OKLCH, Display P3, CMYK, SwiftUI, Flutter and Android, and when to use each one. Markdown: https://pickshade.com/color-formats.md - [Hex color codes explained: how #RRGGBB works](https://pickshade.com/hex-color-codes): How #RRGGBB maps to red, green and blue, 3-digit shorthand, 8-digit hex with an opacity table, why #808080 is not middle gray and how to find a hex on screen. Markdown: https://pickshade.com/hex-color-codes.md - [How to choose a color palette for a website or app](https://pickshade.com/website-color-palette): Build a website color palette from one brand color: tinted neutrals, 50 to 950 scale, semantic colors, 60-30-10, contrast pairs, color blindness checks and CSS. Markdown: https://pickshade.com/website-color-palette.md - [Dark mode colors: how to pick backgrounds, text and accents](https://pickshade.com/dark-mode-colors): Pick dark mode colors that are easy to read: dark gray surfaces instead of pure black, off-white text, lighter brand colors, elevation and light-dark() in CSS. Markdown: https://pickshade.com/dark-mode-colors.md - [Color harmonies: complementary, analogous, triadic and more](https://pickshade.com/color-harmonies): Every color harmony with real swatches, why the HSL wheel gives unbalanced results, RYB vs RGB complements, the 60-30-10 rule and contrast checks with numbers. Markdown: https://pickshade.com/color-harmonies.md - [CSS color-mix() and relative colors: tints, hovers and transparency](https://pickshade.com/css-color-mix): How CSS color-mix() and relative color syntax work, which color space to mix in, copy-paste recipes for hover, tints and alpha, Sass darken() compared, support. Markdown: https://pickshade.com/css-color-mix.md - [Color-blind friendly palettes: how to check and fix your colors](https://pickshade.com/color-blind-friendly-palette): Why red and green fail for 1 in 12 men, how to simulate color blindness, the Okabe-Ito safe palette with measured distances, and rules for UI, charts and maps. Markdown: https://pickshade.com/color-blind-friendly-palette.md - [Tailwind CSS colors: the v4 OKLCH palette, custom colors and shades](https://pickshade.com/tailwind-colors): All 286 Tailwind v4 colors in OKLCH with hex fallbacks, which shades pass WCAG AA on white, what changed from v3, and how to add a custom 50 to 950 scale. Markdown: https://pickshade.com/tailwind-colors.md ## Tools - [Picker](https://pickshade.com): Pick, paste or type any color and copy it as HEX, RGB, HSL, OKLCH, Tailwind, Swift or Flutter. Shades, contrast and harmonies included. Free, no sign-up. - [Palettes](https://pickshade.com/palette): Generate a color palette from your own color or at random with the Space key. Lock colors, pick a style, check contrast and color blindness, export to CSS, Tailwind, SCSS or JSON. Free, no sign-up. - [From image](https://pickshade.com/image): Upload or paste an image and click to pick exact colors. Get an automatic palette with HEX, RGB and OKLCH codes. Your image never leaves your device. - [Colors](https://pickshade.com/colors): Browse every color family by lightness, saturation and black level. Click any shade to copy its HEX, RGB or OKLCH code. - [Convert](https://pickshade.com/convert): Convert colors between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH, Display P3 and XYZ. Precise, free and instant. - [Contrast](https://pickshade.com/contrast): Check the contrast of any two colors with WCAG 2.2 and APCA, preview real text and get the closest accessible color that keeps your hue. - [Gradient](https://pickshade.com/gradient): Create smooth CSS gradients interpolated in OKLab, OKLCH or sRGB. Up to six colors, linear or radial, with a fallback for older browsers and Tailwind v4 classes. - [Tailwind](https://pickshade.com/tailwind): Every Tailwind CSS v4 color with OKLCH, HEX and RGB values, contrast with white and black text and ready-to-copy classes. - [Mix](https://pickshade.com/mix): Mix any two colors at any ratio and see how OKLab, OKLCH, sRGB, LCH and HSL change the result. Copy HEX, OKLCH or a CSS color-mix() expression. - [Distinct colors](https://pickshade.com/distinct-colors): Pick how many colors you need and the look you want. Get distinct colors with the same lightness and saturation, preview them on icons, tags and a chart, and copy HEX or CSS. Check if your own colors match. - [Compare](https://pickshade.com/compare): Compare any two colors side by side: CIEDE2000 difference, lightness, saturation and hue shift, text contrast in both directions and every code. - [Palette ideas](https://pickshade.com/palettes): Browse color palettes by mood, season and use: pastel, earth tones, neon, dark, ocean, autumn and more. Every palette has HEX codes and opens in an editor. - [Color blindness](https://pickshade.com/color-blindness): Check a palette or an image for protanopia, deuteranopia, tritanopia and achromatopsia. PickShade finds color pairs that look the same and keeps your image on your device. - [CSS colors](https://pickshade.com/css-colors): All 148 color names that work in CSS, like tomato and navy. ## API and MCP for AI assistants - MCP server (Streamable HTTP, no key): https://pickshade.com/api/mcp - [MCP setup for Claude, Cursor and VS Code](https://pickshade.com/mcp): Eighteen color tools: convert, find colors by name, check and fix WCAG and APCA contrast, audit palettes, gradients, gamut, names, scales, harmonies, mixing, palettes, color blindness, token and design system export. - [REST API](https://pickshade.com/api): The same tools over HTTP, JSON in and out, no key. - OpenAPI 3.1: https://pickshade.com/api/v1/openapi.json - MCP prompts: accessible_theme (light and dark theme from a brand color with every text pair checked), audit_colors, describe_color. ## Browser extension - [Color picker extension for Chrome, Edge and Firefox](https://pickshade.com/extension): Eyedropper, any color format in and HEX, RGB, HSL, OKLCH out, the palette of the open page with its CSS variables, export to CSS, Tailwind, SCSS and tokens. Permissions: activeTab, scripting, storage, clipboardWrite. ## Markdown for agents Append .md to a guide, color, named color or contrast URL to get the same content as plain Markdown with every value precomputed: - https://pickshade.com/oklch.md - https://pickshade.com/color/ff5733.md - https://pickshade.com/colors/navy-blue.md - https://pickshade.com/contrast/ffffff-on-2563eb.md - Russian: https://pickshade.com/ru/color/ff5733.md ## Programmatic pages - [Color page](https://pickshade.com/color/ff5733): Any six-digit HEX: every format, name, shades, contrast and harmonies. - [Contrast pair](https://pickshade.com/contrast/ffffff-on-ff5733): WCAG 2 and APCA for any text and background pair. - [Conversion pair](https://pickshade.com/convert/hex-to-oklch): Converters between HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, Oklab, OKLCH, Display P3 and XYZ. - [Palette](https://pickshade.com/palette/0f172a-1e40af-60a5fa-fde68a-f97316): Any palette of 2 to 12 HEX colors joined by dashes.