रंग सुगम्यता और पैलेट स्टूडियो
शून्य या छवियों से सुलभ रंग पैलेट बनाएं, WCAG 2.2 कंट्रास्ट जांचें, सुधार सुझाव पाएं, रंग दृष्टि सिमुलेशन करें और CSS, Tailwind व JSON में निर्यात करें।
- WCAG 2.2 सापेक्ष चमक और कंट्रास्ट अनुपात (AA, AAA और गैर-टेक्स्ट) की सटीक जांच
- मूल रंगत को संरक्षित रखते हुए OKLCH न्यूनतम दूरी रंग सुधार एल्गोरिदम
- ब्राउज़र में सीधे मीडियन कट क्वांटिज़ेशन के साथ छवि से रंग निष्कर्षण
- कलर विज़न डेफिशिएंसी सिमुलेशन (प्रोटानोपिया, ड्यूटेरानोपिया, ट्रिटानोपिया, एक्रोमैटोप्सिया)
- विविध प्रारूप निर्यात: CSS वेरिएबल्स, SCSS, Tailwind CSS, JSON और SVG/PNG
Start From
Color Inspector
आधार रंग दर्ज करें (HEX, RGB, HSL, OKLCH)
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
रंग पैलेट सूची
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
WCAG 2.2 कंट्रास्ट सत्यापन
WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)
Passes WCAG AA for normal & large text
Large Headline (18pt Bold / 24px)
This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.
सुलभ रंग सुझाव (OKLCH न्यूनतम बदलाव)
Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)
Preview Text
Contrast: 18.63:1
Palette Contrast Matrix
Cross-audit all foreground and background combinations across your palette. Click any cell to test.
| FG ↓ \ BG → | 4F46E5 | 0EA5E9 | F59E0B | 111827 | 6B7280 | FFFFFF | F3F4F6 | E5E7EB |
|---|---|---|---|---|---|---|---|---|
#4F46E5 | — | 2.27 | 2.93 | 2.82 | 1.3 | 6.29 | 5.71 | 5.08 |
#0EA5E9 | 2.27 | — | 1.29 | 6.4 | 1.74 | 2.77 | 2.52 | 2.24 |
#F59E0B | 2.93 | 1.29 | — | 8.26 | 2.25 | 2.15 | 1.95 | 1.73 |
#111827 | 2.82 | 6.4 | 8.26 | — | 3.67 | 17.74 | 16.12 | 14.33 |
#6B7280 | 1.3 | 1.74 | 2.25 | 3.67 | — | 4.83 | 4.39 | 3.9 |
#FFFFFF | 6.29 | 2.77 | 2.15 | 17.74 | 4.83 | — | 1.1 | 1.24 |
#F3F4F6 | 5.71 | 2.52 | 1.95 | 16.12 | 4.39 | 1.1 | — | 1.13 |
#E5E7EB | 5.08 | 2.24 | 1.73 | 14.33 | 3.9 | 1.24 | 1.13 | — |
वास्तविक घटक पूर्वावलोकन
Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance
Analytics Overview
Updated 5 minutes ago
Total Users
24,592
Conversion Rate
3.48%
Error Incidents
2
रंग दृष्टि दोष सिमुलेशन
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
* गणितीय मॉडल पर आधारित सिमुलेशन। वास्तविक दृष्टि धारणा व्यक्ति दर व्यक्ति भिन्न हो सकती है।
Palette Simulation
#4C4CC6
orig: #4F46E5
#6A60D8
orig: #0EA5E9
#DAE05B
orig: #F59E0B
#141323
orig: #111827
#6E6D7C
orig: #6B7280
#FFFFFF
orig: #FFFFFF
#F3F3F5
orig: #F3F4F6
#E6E6EA
orig: #E5E7EB
Accessible Multi-Series Chart Preview
WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers
ग्रेडिएंट कंट्रास्ट जोखिम विश्लेषण
Multi-point contrast risk analysis across gradient color stops
Gradient Hero Headline
Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);छवि पर टेक्स्ट पठनीयता
Calibrate scrim overlay opacity to guarantee readable text over varied images
Scenic Horizon Photography
Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.
background-color: rgba(0, 0, 0, 0.50);कोड और फ़ाइलें निर्यात करें
Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive
:root {
/* Palette Tokens */
--color-primary-indigo: #4F46E5;
--color-sky-blue: #0EA5E9;
--color-amber-accent: #F59E0B;
--color-text-gray-900: #111827;
--color-muted-gray-500: #6B7280;
--color-white-background: #FFFFFF;
--color-surface-gray-100: #F3F4F6;
--color-border-gray-200: #E5E7EB;
/* Semantic Roles (Light Theme) */
--color-primary: #4F46E5;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text: #0F172A;
--color-mutedText: #64748B;
--color-border: #E2E8F0;
--color-focus: #4F46E5;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
/* Interactive States */
--color-primary-hover: #4433D3;
--color-primary-active: #3A1DC2;
--color-primary-focus: #4F46E5;
--color-primary-disabled: #A8ACC4;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #7579FF;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text: #F8FAFC;
--color-mutedText: #94A3B8;
--color-border: #334155;
--color-focus: #818CF8;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-danger: #F87171;
--color-info: #38BDF8;
--color-primary-hover: #8389FF;
--color-primary-active: #9299FF;
--color-primary-focus: #7579FF;
--color-primary-disabled: #37394A;
}
}रंग सुगम्यता और पैलेट स्टूडियो के बारे में
Solasu का कलर एक्सेसिबिलिटी और पैलेट स्टूडियो केवल एक साधारण कलर पिकर या कंट्रास्ट चेकर नहीं है।
यह एक संपूर्ण पेशेवर डिज़ाइन वर्कफ़्लो प्रदान करता है: नए रंग बनाना, अपलोड की गई छवियों से पैलेट निकालना, WCAG 2.2 मानकों (AA, AAA और गैर-टेक्स्ट घटकों) के अनुसार कंट्रास्ट सत्यापित करना, OKLCH में न्यूनतम बदलाव के साथ रंग सुधार सुझाव पाना, लाइट और डार्क थीम में वास्तविक घटकों का पूर्वावलोकन करना, रंग दृष्टि दोष का अनुकरण करना और CSS, Tailwind, JSON, SVG, PNG और ZIP फ़ाइलों में कोड निर्यात करना।
सभी प्रक्रियाएं आपके ब्राउज़र में सुरक्षित रूप से स्थानीय रूप से निष्पादित होती हैं।
W3C / WCAG 2.2 मानकों पर आधारित सटीक कंट्रास्ट गणना
आधिकारिक sRGB गामा लीनियरिज़ेशन और सापेक्ष चमक (Relative Luminance) सूत्र (L = 0.2126*R + 0.7152*G + 0.0722*B) का उपयोग करता है।
सामान्य टेक्स्ट (AA: 4.5:1, AAA: 7.0:1), बड़े टेक्स्ट (AA: 3.0:1, AAA: 4.5:1) और गैर-टेक्स्ट UI घटकों (3.0:1) का स्वतंत्र रूप से मूल्यांकन करता है।
OKLCH स्पेस में «न्यूनतम बदलाव» रंग सुधार
कंट्रास्ट कम होने पर, OKLCH स्पेस में चमक (L) की बाइनरी खोज करके मूल रंगत और टोन को सुरक्षित रखते हुए सबसे नज़दीकी सुलभ रंग की सिफारिश करता है।
स्थिर पृष्ठभूमि, स्थिर अग्रभूमि या दोनों के समायोजन के विकल्प उपलब्ध हैं।
छवि से स्थानीय रंग पैलेट निष्कर्षण (Median Cut)
JPEG, PNG, WebP छवियों से प्रभावी, उच्चारण, तटस्थ, गहरे और हल्के रंगों को स्वतः निकालता है और पारदर्शी पिक्सेल को बाहर रखता है।
स्मृति सुरक्षा के लिए बड़ी छवियों को 1000px तक स्वतः डाउनसैंपल करता है।
रंग दृष्टि दोष सिमुलेशन और वास्तविक घटक पूर्वावलोकन
प्रोटानोपिया, ड्यूटेरानोपिया, ट्रिटानोपिया और एक्रोमैटोप्सिया का सटीक सिमुलेशन प्रदान करता है।
WCAG 2.2 SC 1.4.1 के अनुसार चेतावनी देता है कि स्थिति केवल रंग द्वारा संप्रेषित न हो, बल्कि आइकन और टेक्स्ट का भी उपयोग हो।
उत्पादन-तैयार कोड निर्यात (CSS, Tailwind, JSON, ZIP)
CSS वेरिएबल्स, Tailwind CSS v3/v4 कॉन्फ़िगरेशन, Design Tokens JSON, SVG स्वैच और संपूर्ण ZIP फ़ाइल का तत्काल निर्यात।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या यह टूल मुफ़्त है? क्या पंजीकरण आवश्यक है?
हाँ, यह 100% मुफ़्त है और किसी खाते या पंजीकरण की आवश्यकता नहीं है।
क्या मेरी छवियां या रंग सर्वर पर सहेजे जाते हैं?
नहीं, सारी गणना और निष्कर्षण आपके ब्राउज़र में स्थानीय रूप से होता है।
कौन से रंग प्रारूप समर्थित हैं?
HEX (3/4/6/8 अंक), RGB, RGBA, HSL, HSLA, HSV और आधुनिक OKLCH समर्थित हैं।
WCAG 2.2 कंट्रास्ट अनुपात की गणना कैसे होती है?
W3C विनिर्देशों के अनुसार सापेक्ष चमक निकाल कर (Lighter + 0.05) / (Darker + 0.05) अनुपात निकाला जाता है।
AA और AAA स्तर में क्या अंतर है?
AA सामान्य टेक्स्ट के लिए 4.5:1 और AAA 7.0:1 की मांग करता है।
बड़ा टेक्स्ट किसे माना जाता है?
कम से कम 18pt (लगभग 24px) या 14pt (लगभग 18.66px) बोल्ड टेक्स्ट।
गैर-टेक्स्ट कंट्रास्ट क्या है?
WCAG 1.4.11 के अनुसार इनपुट बॉर्डर और आइकनों के लिए 3.0:1 कंट्रास्ट आवश्यक है।
रंग सुधार सुझाव कैसे काम करते हैं?
OKLCH स्पेस में चमक बदलकर सबसे नज़दीकी सुरक्षित रंग ढूंढता है।
«न्यूनतम बदलाव» का क्या अर्थ है?
Oklab में Delta E दूरी को कम रखकर मूल ब्रांड रंग को बनाए रखना।
छवि से रंग कैसे निकाले जाते हैं?
कैनवास पर मीडियन कट (Median Cut) क्वांटिज़ेशन एल्गोरिदम चलाकर।
पारदर्शी PNG का प्रबंधन कैसे होता है?
128 से कम अल्फा वाले पिक्सेल को स्वतः छोड़ दिया जाता है।
क्या मैं बड़ी छवियां अपलोड कर सकता हूँ?
हाँ, प्रदर्शन बनाए रखने के लिए छवि को 1000px तक डाउनसैंपल किया जाता है।
क्या रंग दृष्टि सिमुलेशन पूरी तरह सटीक है?
यह एक विश्वसनीय गणितीय मॉडल है, हालांकि व्यक्तिगत दृष्टि में अंतर हो सकता है।
कौन से सिमुलेशन प्रकार उपलब्ध हैं?
प्रोटानोपिया, ड्यूटेरानोपिया, ट्रिटानोपिया और एक्रोमैटोप्सिया।
चार्ट में केवल रंग पर निर्भर क्यों नहीं रहना चाहिए?
ताकि कलरब्लाइंड लोग पैटर्न, डैश और टेक्स्ट लेबल से डेटा पहचान सकें।
डार्क मोड कैसे अनुकूलित होता है?
गहरे बैकग्राउंड (#0F172A) के सापेक्ष रंगों का कंट्रास्ट पुनः परखा जाता है।
ग्रेडिएंट कंट्रास्ट का विश्लेषण कैसे किया जाता है?
ग्रेडिएंट के 11 बिंदुओं पर टेक्स्ट कंट्रास्ट मापकर कमज़ोर क्षेत्रों की चेतावनी देता है।
फ़ोटो पर टेक्स्ट के लिए क्या सुझाव हैं?
औसत चमक के आधार पर सफ़ेद/काले टेक्स्ट और उपयुक्त स्क्रिम की सिफारिश करता है।
क्या Tailwind CSS निर्यात उपलब्ध है?
हाँ, Tailwind v3 कॉन्फ़िग और Tailwind v4 `@theme` दोनों समर्थित हैं।
डाउनलोड की गई ZIP फ़ाइल में क्या होता है?
palette.css, palette.scss, tailwind.config.js, tokens.json, SVG और PNG।
क्या यह मोबाइल ब्राउज़र में चलता है?
हाँ, पूरी तरह उत्तरदायी (responsive) डिज़ाइन फोन और टैबलेट पर काम करता है।
क्या कंट्रास्ट पास होने से पूरी सुगम्यता सुनिश्चित होती है?
नहीं, कीबोर्ड नेविगेशन और स्क्रीन रीडर समर्थन भी उतना ही आवश्यक है।