Stop
Guessing.
Start Picking.
The web runs on absolute values. We extract, convert, and validate them. No AI fluff, no glassmorphism—just the raw math behind the screen.
Design is Math.
In 2024, the tolerance for "close enough" is zero. A 2.9:1 contrast ratio fails WCAG AA and alienates 8% of male users. A misaligned 4px padding breaks the grid on a 320px viewport.
PickClicker exists to expose the numbers. We build calculators, converters, and inspectors that do one thing perfectly: give you the exact values you need to build robust interfaces.
Core Infrastructure
Contrast Checker
Validate text and background color pairings against strict WCAG 2.1 AA and AAA standards. Required for government and enterprise compliance.
Hex to RGB
Instant bidirectional conversion with alpha channel extraction.
Box Shadow
Generate layered, brutalist, or soft inset shadows visually.
Fluid Typography Scale
Calculate precise CSS clamp() values for perfectly scaling typography across viewports without relying on arbitrary media queries.
Type System
We reject the Inter/Roboto hegemony. A tool built for precision requires typography that reflects industrial rigor. IBM Plex provides the engineered foundation; Space Grotesk adds the necessary geometric aggression.
Read the Implementation GuideState of the Web 2024
Color Space Adoption is Accelerating, but Legacy Fails Persist.
| Format | Support | Gamut | Verdict |
|---|---|---|---|
| HEX / sRGB | 100% | Standard | Legacy Safe |
| HSL | 99.8% | Standard | Deprecated* |
| Display P3 | 89.4% | Wide (+25%) | Progressive |
| OKLCH | 89.4% | Wide | Recommended |
* HSL is mathematically flawed for perceptual uniformity.
The Shift to OKLCH
The problem with HSL and HSV is perceptual inconsistency. Two colors with the exact same "Lightness" value in HSL can appear vastly different in perceived brightness to the human eye. A pure yellow at 50% lightness is blinding; a pure blue is nearly black.
OKLCH solves this by mapping to human perception. A lightness value of 60% in OKLCH looks equally bright whether the hue is yellow or blue. This makes programmatic theme generation mathematically sound.
Read the OKLCH Migration GuideZero Client
Dependencies.
We don't load 4MB of React to change the background color of a div. Our interactive tools use Alpine.js for lightweight, declarative DOM manipulation.
More importantly, we enforce a strict <noscript> fallback policy. If JavaScript fails, is blocked, or is disabled, you get a functional HTML form that submits to the server. The web is a document first.
<!-- The PickClicker Standard -->
<noscript>
<form action="." method="GET">
<label for="hex">Hex Color</label>
<input type="text" id="hex" name="hex">
<button type="submit">Convert</button>
</form>
</noscript>
<div x-data="converter()" x-show="true" style="display:none">
<!-- JS Enhanced UI -->
</div>Documentation
Technical Implementation Guides
--color-primary: var(--red-500);
Structuring CSS Variables
The two-tier system, component scoping, and handling alpha channels without SASS.
aria-invalid="true"
Building Accessible Forms
Aria attributes, state management, and visual indicators for WCAG 2.2 compliance.
Digital Color Theory
The mathematical and perceptual theory behind sRGB, P3, and OKLCH color spaces.
Frequently Asked Questions
Why is this site so brutalist?
Because data tools shouldn't be pretty; they should be legible. Soft shadows, rounded corners, and low-contrast text actively hinder the ability to read and copy precise values. We prioritize function and stark clarity over current design trends.
Are the color conversions exact?
Yes. Many online converters use rounding shortcuts that result in off-by-one errors in RGB values. Our JavaScript functions use precise floating-point math before applying the final necessary integer rounding for CSS output.
Do I need an account to use the API?
There is no API, and there are no accounts. All tools run entirely in your browser using local math. You can disconnect from the internet and the tools will still function perfectly.
The Landscape
| Tool | Focus | Drawbacks | PickClicker Alternative |
|---|---|---|---|
| Coolors.co | Generative palettes, discovery. | Heavy ads, accounts required for pro features, bloated UI for simple tasks. | Direct Hex/RGB tools, no accounts. |
| WebAIM Contrast | Industry standard WCAG checking. | Dated UI, lacks modern visual context and programmatic copy features. | Contrast Checker with live preview UI. |
| CSSmatic | CSS Generators (Shadows, Radii). | Abandoned, no updates for modern CSS specs, heavy advertising. | Modern Box Shadow & Triangle tools. |
Ready to measure?
Stop guessing hex codes and start building with precision. Access the full toolkit instantly.
Open The Toolkit