VibeGear
Web design

Color converter

Paste any CSS color, see all formats — including OKLCH.

Install for Chrome →All features

Tools → Convert → Color toolkit · 7-day free trial · Premium $9.99 / yr

Try it now·runs locally · nothing uploaded
Color
All formats
  • Hex#b9ff41
  • RGBrgb(185 255 65)
  • HSLhsl(82.11 100% 62.75%)
  • OKLCHoklch(92.08% 0.2198 128.24)
  • Tailwindbg-[#b9ff41]
WCAG contrast
vs white: 1.20:1vs black: 17.44:1
Want this and 50 more tools at one keyboard shortcut, with collections and persistence?Install free trial →
★ Premium

Built for the things AI can’t fake

This tool runs free, right here. The extension adds three things a web widget can’t:

Start 7-day trial→
★ Flagship

Playground

↗

JS / TS scratchpad — sandboxed and instrumented.

Paste real code, hit Run. Console + network monitor + watch expressions all in one panel.

  • ·Real ES modules · top-level await
  • ·URL imports — esm.sh & friends
  • ·Live fetch monitor (every call)
  • ·Watch expressions in your scope
  • ·10s sandbox timeout · zero CORS pain

HTTP client

↗

Postman-style request runner.

Save collections, share variables, hit any API. Includes GraphQL with introspection, OpenAPI / cURL import.

  • ·Bearer / Basic / API-key auth
  • ·GraphQL · introspection
  • ·OpenAPI 3.x · cURL import
  • ·Copy as fetch / axios / Python

Realtime (WS + SSE)

↗

Stream-protocol tester — what Postman doesn’t do well.

WebSocket + Server-Sent Events with custom auth headers, auto-reconnect, JSON pretty-print.

  • ·wss:// + ws:// + subprotocols
  • ·SSE via fetch — Authorization works
  • ·Auto-reconnect with backoff
  • ·Send composer · ⌘ + Enter

What it does

Modern CSS keeps adding color formats. hex / rgb are old friends. hsl is easier to reason about (rotate hue, slide saturation). OKLCH is the newest — perceptually uniform, meaning equal lightness numbers actually look equally light.

The Color toolkit parses any of them (plus named colors and oklab / color-mix / anything CSS knows) and shows you all formats simultaneously.

Why use VibeGear's color converter

How to use it

  1. 1Tools → Convert → Color toolkit.
  2. 2Paste any color value or use the native color picker.
  3. 3Read the formats; click any swatch to copy hex.

Frequently asked

Does it support oklab() and color-mix()?

Yes — anything the browser parses. We use a canvas-assist trick to read whatever CSS color the input is, then compute every other format from RGB.

Related tools

WCAG contrast checker

Live contrast ratio with AA / AAA pass-fail badges.

CSS gradient generator

Build linear / radial gradients with draggable stops.

Box-shadow generator

Stack shadows for realistic depth — Material 3, soft elevation, glow.

★ Premium

One install. Every tool above.

7 days free, then VibeGear Premium is $9.99 / €9.99 per year. Everything runs locally.

Install & start trial →→