The Universal HEX to RGB & RGBA Converter, Color Harmonies Studio & WCAG Contrast Inspector is a high-precision, 24-bit / 32-bit in-browser colorimetry engine engineered for digital designers, frontend architects, and web accessibility specialists. Operating 100% client-side with zero external API dependencies or telemetry latency, the studio ingests 3, 4, 6, and 8-digit hexadecimal notations (#RGB, #RGBA, #RRGGBB, and #RRGGBBAA) with real-time sanitization and live bi-directional channel sliders.
Beyond basic conversion, the suite provides a multi-space color bridge translating values into standard CSS comma-separated rgba(), modern space-separated CSS Color Module Level 4 rgb(r g b / alpha) syntax, cylindrical HSL (hsl() / hsla()), HSV / HSB, subtractive CMYK for print proofs, and perceptual CIE L*a*b* (D65 illuminant). Its integrated W3C WCAG 2.1 Accessibility Radar computes gamma-corrected relative luminance ($Y$) and real-time contrast ratios against pure white and deep charcoal backgrounds, rendering pass/fail compliance badges for AA Normal (4.5:1), AA Large (3.0:1), and enhanced AAA (7.0:1) standards. With algorithmic harmony synthesis (Complementary, Split-Complementary, Analogous, Triadic, Tetradic, and Monochromatic tints/shades), 1-click multi-format clipboard exporters (CSS Variables, SCSS, Tailwind config, Swift UIColor, Android XML), a 1200×630 Canvas Dossier Card Generator, and seamless automatic synchronization with RiazHub’s site-wide night/dark mode, this utility serves as an indispensable digital color workstation.
Universal HEX to RGB / RGBA Studio
High-precision 24-bit / 32-bit in-browser colorimetry engine. Convert 3, 4, 6, and 8-digit HEX codes to CSS Level 4 rgb(), HSL, CMYK, and CIE LAB spaces, evaluate real-time W3C WCAG 2.1 contrast ratios, synthesize harmonic design palettes, and export 1200x630 specification dossier cards.
This live sample renders body copy using your active color over a white surface.
This live sample renders body copy using your active color over a dark UI surface.
| Standard Criteria | Threshold | Against White (#FFF) | Against Black (#000) |
|---|---|---|---|
| WCAG AA Normal Text (<18pt / 24px) | 4.50 : 1 | Pass (4.41) | Pass (4.76) |
| WCAG AA Large Text (≥18pt or 14pt bold) | 3.00 : 1 | Pass (4.41) | Pass (4.76) |
| WCAG AAA Normal Text (Enhanced) | 7.00 : 1 | Fail (4.41) | Fail (4.76) |
| WCAG AAA Large Text (Enhanced) | 4.50 : 1 | Fail (4.41) | Pass (4.76) |
:root {
--color-primary-hex: #0284C7;
--color-primary-rgb: 2, 132, 199;
--color-primary: rgb(var(--color-primary-rgb));
--color-primary-alpha: rgba(2, 132, 199, 1);
}
module.exports = {
theme: {
extend: {
colors: {
'brand': {
DEFAULT: '#0284C7',
rgb: 'rgb(2, 132, 199)',
}
}
}
}
};
$color-brand-hex: #0284C7; $color-brand-rgb: (2, 132, 199); $color-brand: rgb(2, 132, 199);
// Swift (iOS UIColor) let brandColor = UIColor(red: 2/255.0, green: 132/255.0, blue: 199/255.0, alpha: 1.0) <!-- Android XML colors.xml --> <color name="brand_primary">#FF0284C7</color>
⚡ Real-World Preset Color Scenarios
📚 Color Science, W3C Specifications & Accessibility Guide
#0284C7), the characters are grouped into three 8-bit pairs representing Red, Green, and Blue. Each channel ranges from 00 (decimal 0) to FF (decimal 255), allowing $256 \times 256 \times 256 = 16,777,216$ distinct possible colors. In shorthand 3-digit notation (e.g. #F09), each digit is doubled to yield #FF0099.
#RRGGBBAA). For instance, #00000080 represents pure black with 50% opacity ($128/255 \approx 0.50$). Shorthand 4-digit notation (#RGBA) expands each digit symmetrically (e.g., #1238 becomes #11223388). Modern browser rendering engines parse 8-digit codes natively in CSS properties.
#0000FF) looks substantially darker to the human eye than pure green (#00FF00), despite both sharing a channel maximum of 255.
- Level AA Normal Text: Contrast ratio of at least 4.5:1 for body typography under 18pt (24px) or 14pt (18.66px) bold.
- Level AA Large Text: Minimum ratio of 3.0:1 for headlines and large text elements.
- Level AAA Enhanced: Minimum ratio of 7.0:1 for normal text and 4.5:1 for large text to assist users with low visual acuity.