कलर कोड पिकर — HEX RGB Color फ्री में पाएं | ToolsArena

Color design में सबसे powerful element है। एक सही color choice website को professional बनाती है, गलत choice से user trust कम होता है। India में web designers और freelancers के लिए color codes समझना ज़रूरी है — चाहे Canva पर work करें या React/HTML projects बनाएं।

इस guide में: HEX, RGB, HSL formats का फर्क, India की top companies के official brand colors, CSS variables कैसे use करें, और accessible colors कैसे choose करें।

Free Tool

Color Code Pick करें — Free Online Tool

HEX, RGB, HSL, CMYK instantly get करें। Visual picker, eyedropper, copy-to-clipboard। कोई signup नहीं।

Color Picker खोलें →

Color Formats — HEX, RGB, HSL, CMYK क्या हैं?

सभी color formats एक ही color को अलग तरीके से express करते हैं:

Format	Example	कब Use करें
HEX	#1d4ed8	CSS, HTML, सभी web projects
RGB	rgb(29, 78, 216)	CSS, digital screens
RGBA	rgba(29, 78, 216, 0.5)	CSS में transparency के साथ
HSL	hsl(221, 76%, 48%)	CSS animations, theming
CMYK	cmyk(87, 64, 0, 15)	Print design, Photoshop

HEX Code कैसे पढ़ें?

HEX code = #RRGGBB। R = Red, G = Green, B = Blue, हर एक 00 से FF (0-255 decimal) तक। #000000 = काला, #ffffff = सफेद, #ff0000 = pure red।

HSL — Design के लिए सबसे अच्छा Format

HSL = Hue (रंग angle 0-360°), Saturation (0% grey - 100% vivid), Lightness (0% black - 100% white)। किसी color को lighter बनाना हो? Lightness बढ़ा दें। Muted palette चाहिए? Saturation कम करें। Canva और Figma दोनों HSL use करते हैं।

India की Top Companies के Official Brand Colors

India की top brands के official color codes (reference के लिए — trademark use avoid करें):

Brand	Primary Color	HEX Code	RGB
Jio	Jio Blue	#0F62AC	15, 98, 172
Airtel	Airtel Red	#E40000	228, 0, 0
Zomato	Zomato Red	#E23744	226, 55, 68
Swiggy	Swiggy Orange	#FC8019	252, 128, 25
Paytm	Paytm Blue	#00B9F1	0, 185, 241
Flipkart	Flipkart Yellow	#F7C600	247, 198, 0
IRCTC	IRCTC Navy	#003974	0, 57, 116
HDFC Bank	HDFC Red	#004B8D	0, 75, 141
SBI	SBI Blue	#22409A	34, 64, 154
OLA	OLA Green	#1CAC78	28, 172, 120

Canva और Figma में Color Picker Tips

Canva: Color box click करें → HEX field में code paste करें। Brand Kit में save करें।
Figma: Fill → HEX code type करें। Styles में save करके reuse करें।
Chrome DevTools: F12 → Elements → किसी color पर click → eyedropper से screen से color pick करें।

CSS Color Variables — Professional तरीके से Colors Manage करें

एक professional website में colors centrally manage होते हैं — एक जगह change करने पर पूरी site change हो जाती है:

:root {
  --color-primary: #1d4ed8;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1e40af;
  --color-accent: #f59e0b;
  --color-text: #111827;
  --color-bg: #ffffff;
}

/* Use करना */
button {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

Dark Mode Support

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-text: #f1f5f9;
  }
}

Tailwind CSS use करते हैं? tailwind.config.js में अपने brand colors define करें:

colors: {
  brand: {
    primary: '#1d4ed8',
    accent: '#f59e0b',
  }
}

Accessible Colors — WCAG Standards क्या हैं?

India में ~8% पुरुष और ~0.5% महिलाएं color blindness से affected हैं। Accessible colors choose करने से आपकी website ज़्यादा inclusive बनती है।

WCAG Contrast Requirements

AA Standard (minimum): Normal text के लिए 4.5:1 contrast ratio, large text के लिए 3:1
AAA Standard (enhanced): Normal text के लिए 7:1

Quick Reference

Text Color	Background	Ratio	WCAG AA
Black (#000)	White (#fff)	21:1	Pass ✓
White (#fff)	Jio Blue (#0F62AC)	~7:1	Pass ✓
White (#fff)	Light Gray (#aaa)	~2:1	Fail ✗

Common Mistakes India में

Light yellow text on white background — very common in Indian websites, fails WCAG
Red text on green background — color blind users के लिए unreadable
Grey (#999) text on white — borderline fail

Tip: ToolsArena का Color Contrast Checker use करें — कोई भी 2 colors डालें, instantly WCAG AA/AAA pass/fail बताएगा।

How to Use the Tool (Step by Step)

1
Color Picker खोलें
ToolsArena का free Color Picker open करें — कोई login नहीं चाहिए।
2
Color Select करें
Color spectrum पर click करें, या directly HEX/RGB/HSL value type करें।
3
Format Switch करें
HEX, RGB, या HSL tab click करके अपना preferred format select करें।
4
Copy करें
Copy button click करें — color code clipboard में copy हो जाएगा। Canva/Figma/CSS में paste करें।
5
Screen से Color Pick करें
Eyedropper tool use करें (Chrome/Edge में supported) — screen पर कहीं भी से color pick करें।

Frequently Asked Questions

HEX और RGB में क्या फर्क है?+

HEX और RGB एक ही color को अलग notation में express करते हैं। #ff0000 और rgb(255,0,0) एक ही red color है। HEX shorter और CSS में popular है। RGB तब use करें जब transparency चाहिए (rgba) या individual channels manipulate करने हों।

किसी image से color code कैसे निकालें?+

Browser में eyedropper tool use करें (Chrome 95+ में built-in)। या image को Canva में upload करें, color picker से click करें। Figma में भी eyedropper tool available है। ToolsArena के Color Picker में screen capture eyedropper use करें।

HSL color format क्या है और कब use करें?+

HSL = Hue (color angle), Saturation (vividity), Lightness। Design में most intuitive format है। CSS animations में, या जब programmatically lighter/darker shades बनानी हों तो HSL best है। hsl(221, 76%, 48%) को lighter बनाना हो? Lightness 60% कर दें।

CMYK और RGB में क्या फर्क है?+

RGB screen के लिए (light mixing), CMYK printing के लिए (ink mixing)। Web design के लिए RGB/HEX use करें। Print materials (visiting cards, brochures, banners) के लिए CMYK। Same color screen पर और print पर slightly different दिख सकता है।

Website के लिए accessible colors कैसे choose करें?+

Text और background का contrast ratio कम से कम 4.5:1 होना चाहिए (WCAG AA)। Dark text on light background या light text on dark background generally safe है। Light gray text on white background avoid करें। ToolsArena का Color Contrast Checker use करें — instantly WCAG result बताएगा।

Free — No Signup Required