కలర్ కన్వర్షన్ అంటే ఏమిటి?
మీ బ్రౌజర్ రెండర్ చేసే ప్రతి రంగు చివరికి ఒక sRGB ట్రిపుల్ — రెడ్, గ్రీన్, మరియు బ్లూ చానెల్స్ కోసం 0 నుండి 255 మధ్య మూడు సంఖ్యలు, ప్లస్ ఆప్షనల్ ఆల్ఫా. CSS Color Level 4 స్పెసిఫికేషన్ అదే ట్రిపుల్కు రౌండ్-ట్రిప్ అయ్యే అనేక టెక్స్ట్ ఫార్మాట్లు, ప్లస్ పర్సెప్చువల్లీ-యూనిఫారమ్ OKLCH స్పేస్ నిర్వచిస్తుంది. ఈ టూల్ వాటిలో దేనినైనా చదివి అన్నింటికీ కన్వర్ట్ చేస్తుంది, మరియు రెండవ రంగుతో WCAG 2.1 కాంట్రాస్ట్ రేషియో నివేదిస్తుంది.
కలర్ కన్వర్షన్ ఎలా పనిచేస్తుంది?
కన్వర్షన్ అనేది సుస్పష్టమైన లీనియర్ మరియు నాన్-లీనియర్ ట్రాన్స్ఫారమ్ల శ్రేణి. ప్రతి అడుగు మీ బ్రౌజర్లో రన్ అవుతుంది — ఏ ఇన్పుట్ మా సర్వర్లకు చేరదు:
- మీ ఇన్పుట్ పార్స్ చేయబడుతుంది. టూల్ 3, 4, 6, లేదా 8-డిజిట్ HEX, ఫంక్షనల్ ఫారమ్లు
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()లెగసీ కామా సింటాక్స్ లేదా మోడర్న్ స్లాష్-ఆల్ఫా సింటాక్స్లో, లేదా 150 నేమ్డ్ CSS కలర్లలో ఏదైనా (rebeccapurpleసహా) స్వయంచాలకంగా గుర్తిస్తుంది. - పార్స్ చేయబడిన రంగు కానోనికల్ sRGB కి నార్మలైజ్ చేయబడుతుంది — 0–1 రేంజ్లో నాలుగు ఫ్లోట్లు
{r, g, b, a}. ప్రతి అవుట్పుట్ ఫార్మాట్ డెరైవ్ చేయబడే ఏకైక సత్య మూలం ఇది. - HEX ప్రతి చానెల్ను దాని 0–255 బైట్ విలువకు రౌండ్ చేసి హెక్స్ డిజిట్లను జాయిన్ చేయడం ద్వారా వస్తుంది. RGB / RGBA అదే బైట్లు ప్రింట్ చేస్తాయి. HSL మరియు HSV స్టాండర్డ్ W3C సిలిండ్రికల్-కోఆర్డినేట్ అల్గారిథమ్లు వర్తిస్తాయి; HWB హ్యూ HSV నుండి, వైట్నెస్
min(r, g, b)నుండి, మరియు బ్లాక్నెస్1 - max(r, g, b)నుండి డెరైవ్ చేస్తుంది. - CMYK ఒక నైవ్ అప్రాక్సిమేషన్ —
k = 1 - max(r, g, b), అప్పుడు రెసిడ్యువల్ చానెల్స్ నుండిc, m, y. ఇది స్క్రీన్ ప్రివ్యూకు అనుకూలంగా ఉంటుంది కానీ ప్రింట్ కోసం కాదు: రియల్ CMYK అవుట్పుట్ కు ఈ టూల్ ఉద్దేశపూర్వకంగా ఎంబెడ్ చేయని ICC ప్రొఫైల్ అవసరం. - OKLCH css-color-4 ఫార్వర్డ్ పాత్ అనుసరిస్తుంది: sRGB లీనియరైజ్ చేయబడుతుంది, LMS మాత్రిక ద్వారా గుణించబడుతుంది, క్యూబ్-రూటెడ్, LMS-to-OKLab మాత్రిక ద్వారా గుణించబడుతుంది, మరియు చివరగా రెక్టాంగులర్ OKLab నుండి పోలార్ OKLCH కి కన్వర్ట్ చేయబడుతుంది. OKLCH పర్సెప్చువల్లీ యూనిఫారమ్, ఇది మానవ కంటికి సమతుల్యంగా కనిపించే పాలెట్లు డిజైన్ చేయడానికి సరైన స్పేస్ చేస్తుంది.
ఈ కలర్ కన్వర్టర్ ఎందుకు వాడాలి?
- గోప్యత: ప్రతి కన్వర్షన్ మీ బ్రౌజర్లో ప్లెయిన్ JavaScript ఉపయోగించి రన్ అవుతుంది. మీరు పేస్ట్ చేసిన రంగు మీ పరికరం వదిలి వెళ్ళదు, ఇది రిలీజ్ కాని బ్రాండ్ పని, ఇంటర్నల్ డిజైన్ సిస్టమ్లు, మరియు NDA కింద క్లయింట్ మాక్లకు ముఖ్యం.
- డిజైనర్-టు-డెవలపర్ హ్యాండ్ఆఫ్: Figma నుండి HEX పేస్ట్ చేసి Tailwind కాన్ఫిగ్ కోసం
rgb()స్ట్రింగ్, CSS కస్టమ్ ప్రాపర్టీ కోసంhsl()స్ట్రింగ్, లేదా మోడర్న్ పాలెట్ కోసంoklch()స్ట్రింగ్ చదవండి — ఒకే చోట అన్ని ఫార్మాట్లు, ట్యాబ్లు మారకుండా. - WCAG ఖచ్చితత్వం: కాంట్రాస్ట్ చెకర్ సాధారణ మరియు పెద్ద వచనానికి ఖచ్చితమైన WCAG 2.1 రిలేటివ్-లూమినెన్స్ ఫార్ముల మరియు ప్రచురించిన AA (4.5 / 3.0) మరియు AAA (7.0 / 4.5) థ్రెషోల్డ్లు ఉపయోగిస్తుంది. నివేదించిన రేషియో మాన్యువల్ కాలిక్యులేటర్లతో 0.01 లోపు మ్యాచ్ అవుతుంది.
- డార్క్-మోడ్ మరియు పాలెట్ డెరివేషన్: HSL మరియు OKLCH లైట్నెస్ను ఒకే చానెల్గా ఎక్స్పోజ్ చేస్తాయి, కాబట్టి మ్యాచ్ చేయబడిన డార్క్-మోడ్ టోకెన్లు డెరైవ్ చేయడానికి లేదా ఒకే సీడ్ నుండి 10-స్టెప్ పాలెట్ రామ్ప్ జనరేట్ చేయడానికి బ్రాండ్ కలర్ను లైట్నెస్ యాక్సిస్ పైన లేదా కిందకు షిఫ్ట్ చేయడం సులభం.
కలర్ కన్వర్షన్ సాధారణ అప్లికేషన్లు ఏమిటి?
కలర్ కన్వర్షన్ వెబ్ డెవలప్మెంట్, డిజైన్, మరియు యాక్సెసిబిలిటీ పని అంతటా కనిపిస్తుంది:
- డిజైన్ సిస్టమ్లు: CSS కస్టమ్-ప్రాపర్టీ స్కేల్ కోసం మ్యాచ్ చేయబడిన HSL మరియు OKLCH టోకెన్లుగా బ్రాండ్ HEX కన్వర్ట్ చేయడం, అప్పుడు ప్రతి టోకెన్ కాంబినేషన్ పేజ్ బ్యాక్గ్రౌండ్కు వ్యతిరేకంగా WCAG AA పాస్ అవుతుందో వెరిఫై చేయడం.
- యాక్సెసిబిలిటీ ఆడిట్లు: రియల్ ప్రొడక్ట్ స్క్రీన్ నుండి ఫోర్గ్రౌండ్ మరియు బ్యాక్గ్రౌండ్ జంట పేస్ట్ చేసి సాధారణ-వెయిట్ మరియు లార్జ్-వెయిట్ వచనానికి ఒకే చూపులో కాంట్రాస్ట్ రేషియో ప్లస్ AA/AAA వర్డిక్టులు చదవడం.
- క్రాస్-టూల్ రౌండ్-ట్రిప్లు: స్క్రీన్షాట్ పిక్కర్ (HEX) నుండి రంగు పుల్ చేసి, ఇక్కడ పేస్ట్ చేసి,
hsl()లేదాoklch()స్ట్రింగ్ నేరుగా Tailwind, Figma టోకెన్లు, లేదా CSS-in-JS థీమ్లో కాపీ చేయడం.
కలర్ కన్వర్షన్ ఉదాహరణ ఎలా కనిపిస్తుంది?
ప్రసిద్ధ rebeccapurple తీసుకోండి. నేమ్డ్-కలర్ లుక్అప్ దానిని #663399 కి రిజాల్వ్ చేస్తుంది. RGB కన్వర్షన్ rgb(102, 51, 153) ఇస్తుంది. HSL కన్వర్షన్ hsl(270, 50%, 40%) ఇస్తుంది — వయోలెట్ హ్యూ, హాఫ్-శాచ్యురేటెడ్, ఫోర్-టెన్త్స్ బ్రైట్. ఆ రంగును స్వచ్ఛమైన తెల్లతో కాంట్రాస్ట్ టూల్తో చెక్ చేయడం 7.39 దగ్గర రేషియో ఇస్తుంది, ఇది సాధారణ వచనానికి AAA (7.0) మరియు పెద్ద వచనానికి AAA (4.5) క్లియర్ చేస్తుంది. #663399 ను RGB → HSL → RGB → HEX ద్వారా రౌండ్-ట్రిప్ చేయడం అసలు స్ట్రింగ్ను ఖచ్చితంగా, బైట్ ఫర్ బైట్ తిరిగి ఇస్తుంది.
మీరు కోడ్లో, డిజైన్ ఫైళ్ళలో, లేదా స్క్రీన్షాట్లో ఎదుర్కొనే ఏ రంగుకైనా ఈ కన్వర్టర్ను త్వరిత రెఫరెన్స్గా ఉపయోగించండి, మరియు షిప్ చేయడానికి ముందు శానిటీ చెక్ కోసం కాంట్రాస్ట్ చెకర్ ఉపయోగించండి. అన్నీ లోకల్గా రన్ అవుతాయి, ఏదీ లాగ్ చేయబడదు, మరియు కన్వర్షన్ మేత్ ప్రచురించిన W3C మరియు WCAG స్పెసిఫికేషన్లు అనుసరిస్తుంది.