కలర్ పికర్
ఏ రంగునైనా ఎంచుకోండి. దాని కోడ్ సాధారణంగా వాడే ప్రతి ఫార్మాట్‌లోనూ కాపీ చేయడానికి సిద్ధంగా వస్తుంది. సరిపోయే పాలెట్‌లు తయారు చేసుకోవచ్చు. ఫోటోను అప్లోడ్ చేయకుండానే అందులోని ప్రధాన రంగులు తీయవచ్చు. టెక్స్ట్, బ్యాక్‌గ్రౌండ్ రంగుల జత WCAG కాంట్రాస్ట్‌లో పాస్ అవుతుందో లేదో కూడా చెక్ చేయవచ్చు.
కలర్ పికర్
అన్ని ఫార్మాట్‌లలో రంగు కోడ్‌లు
- HEX#2F6FED
- RGB47, 111, 237
- HSL220°, 84%, 56%
- HSB / HSV220°, 80%, 93%
- CMYK (సుమారు)80%, 53%, 0%, 7%
- CSS rgb()rgb(47 111 237)
- CSS hsl()hsl(220 84% 56%)
ఈ రంగు నుండి పాలెట్‌లు
పూరక రంగులు
సమీప రంగులు
త్రికోణ రంగులు
టింట్‌లు (తెలుపుతో కలిపినవి)
షేడ్‌లు (నలుపుతో కలిపినవి)
ఇమేజ్ నుండి పాలెట్
మీ ఇమేజ్‌ను మీ బ్రౌజరే చదువుతుంది, అప్లోడ్ చేయదు: ఈ పరికరంలోని క్యాన్వాస్‌పై పిక్సెల్స్ నమూనా తీసుకోబడతాయి, ఏదీ ఎక్కడికీ పంపబడదు.
ఫోటో, స్క్రీన్‌షాట్ లేదా లోగోను ఇక్కడ వదలండి
మీ ఇమేజ్‌లోని ఆరు ప్రధాన రంగులు ఇక్కడ కనిపిస్తాయి. పికర్‌లో లోడ్ చేయడానికి ఒక స్వాచ్‌ను క్లిక్ చేయండి.
కాంట్రాస్ట్ చెకర్ (WCAG 2.1)
పెద్ద టెక్స్ట్ నమూనా
The quick brown fox jumps over the lazy dog. 0123456789
- AA · సాధారణ టెక్స్ట్పాస్
- AAA · సాధారణ టెక్స్ట్పాస్
- AA · పెద్ద టెక్స్ట్పాస్
- AAA · పెద్ద టెక్స్ట్పాస్
పెద్ద టెక్స్ట్ అంటే కనీసం 18 pt (24 px) సాధారణం లేదా 14 pt (సుమారు 18.7 px) బోల్డ్. AAకు సాధారణ టెక్స్ట్కు 4.5:1, పెద్దదానికి 3:1 కావాలి; AAAకు 7:1 మరియు 4.5:1 కావాలి.
సాధారణ CSS పేరు గల రంగులు
ప్రతి బ్రౌజర్ అర్థం చేసుకునే ఇరవై కీవర్డ్‌లు, వాటి ఖచ్చితమైన HEX, RGB, HSL విలువలతో.
| పేరు | HEX | RGB | HSL |
|---|---|---|---|
black | #000000 | 0, 0, 0 | 0°, 0%, 0% |
white | #ffffff | 255, 255, 255 | 0°, 0%, 100% |
gray | #808080 | 128, 128, 128 | 0°, 0%, 50% |
silver | #c0c0c0 | 192, 192, 192 | 0°, 0%, 75% |
red | #ff0000 | 255, 0, 0 | 0°, 100%, 50% |
crimson | #dc143c | 220, 20, 60 | 348°, 83%, 47% |
maroon | #800000 | 128, 0, 0 | 0°, 100%, 25% |
tomato | #ff6347 | 255, 99, 71 | 9°, 100%, 64% |
coral | #ff7f50 | 255, 127, 80 | 16°, 100%, 66% |
orange | #ffa500 | 255, 165, 0 | 39°, 100%, 50% |
gold | #ffd700 | 255, 215, 0 | 51°, 100%, 50% |
yellow | #ffff00 | 255, 255, 0 | 60°, 100%, 50% |
olive | #808000 | 128, 128, 0 | 60°, 100%, 25% |
green | #008000 | 0, 128, 0 | 120°, 100%, 25% |
teal | #008080 | 0, 128, 128 | 180°, 100%, 25% |
aqua | #00ffff | 0, 255, 255 | 180°, 100%, 50% |
blue | #0000ff | 0, 0, 255 | 240°, 100%, 50% |
navy | #000080 | 0, 0, 128 | 240°, 100%, 25% |
purple | #800080 | 128, 0, 128 | 300°, 100%, 25% |
rebeccapurple | #663399 | 102, 51, 153 | 270°, 50%, 40% |
HEX, RGB, HSL, HSB నిజంగా ఏమి సూచిస్తాయి
ఈ పేజీలోని ప్రతి రంగు sRGBలోనే ఉంటుంది. 1990ల చివరలో బ్రౌజర్‌లు దీన్ని స్వీకరించినప్పటి నుండి ఇదే వెబ్ డిఫాల్ట్ కలర్ స్పేస్. స్క్రీన్ ఎరుపు, ఆకుపచ్చ, నీలం కాంతులను కలుపుతుంది, ప్రతి ఛానల్‌కు 256 స్థాయిలు (0–255) ఉంటాయి, అంటే మొత్తం 16,777,216 రంగులు సాధ్యం. RGB ఆ మూడు సంఖ్యలను నేరుగా రాస్తుంది; HEX అవే మూడు సంఖ్యలను 16 ఆధారంలో, ఒక్కొక్కటి రెండు అంకెలతో రాస్తుంది. కాబట్టి #FF6600 అంటే ఎరుపు 255, ఆకుపచ్చ 102, నీలం 0. మూడు అంకెల సంక్షిప్త రూపంలో ప్రతి అంకె రెట్టింపు అవుతుంది: #F60 అంటే #FF6600.
HSL, HSB (HSV అని కూడా అంటారు) అవే రంగులను చేతితో సర్దుబాటు చేయడానికి సులభమైన రీతిలో వివరిస్తాయి. హ్యూ అనేది కలర్ వీల్‌పై కోణం: 0° ఎరుపు, 120° ఆకుపచ్చ, 240° నీలం. తేడా చివరి సంఖ్యలో ఉంటుంది. HSLలో లైట్‌నెస్ 100% ఎప్పుడూ తెలుపు, 50% హ్యూ యొక్క స్వచ్ఛమైన రూపం; HSBలో బ్రైట్‌నెస్ 100% స్వచ్ఛమైన హ్యూ, తెలుపుకు సాచురేషన్ 0% కావాలి. Photoshop, Figma వంటి డిజైన్ యాప్‌లు తమ పికర్‌లలో HSB వాడతాయి, CSS hsl()ను నేరుగా అర్థం చేసుకుంటుంది, అందుకే పైన రెండూ ఇచ్చాం.
CMYK విలువ ఎందుకు సుమారు అంచనా మాత్రమే
స్క్రీన్‌లు కాంతిని కలుపుతాయి; ప్రింటర్లు సయాన్, మెజెంటా, ఎల్లో, బ్లాక్ ఇంక్‌లతో దాన్ని తగ్గిస్తాయి. ఈ రెండు వ్యవస్థలు వేర్వేరు రంగుల పరిధులను (గామట్) కవర్ చేస్తాయి. ప్రకాశవంతమైన RGB ఆకుపచ్చ, ఎలక్ట్రిక్ బ్లూ, నియాన్ ఆరెంజ్ వంటి అత్యంత సాచురేటెడ్ స్క్రీన్ రంగులను ప్రాసెస్ ఇంక్‌లు పునరుత్పత్తి చేయలేవు, అందుకే అవి మానిటర్‌లో కనిపించేదానికంటే మందంగా ప్రింట్ అవుతాయి.
ఇక్కడి CMYK సంఖ్యలు ICC ప్రొఫైల్ లేకుండా సాధారణ గణిత మార్పిడిని వాడతాయి. ఇది ఉజ్జాయింపు బ్రీఫ్‌కు ఉపయోగపడుతుంది కానీ ప్రెస్‌కు కాదు. ప్రింటర్ తన పేపర్, ప్రెస్‌కు తగిన ప్రొఫైల్‌తో మారుస్తారు, ఉదాహరణకు యూరప్‌లో FOGRA39, అమెరికాలో GRACoL; ఒకే RGB రంగు ప్రతిదానిలో వేర్వేరు ఇంక్ శాతాలతో రావచ్చు. ప్రింట్ పనికి RGB లేదా HEX విలువతో పాటు ప్రింటర్ అడిగే ప్రొఫైల్‌ను పంపండి.
కాంట్రాస్ట్ నిష్పత్తిని ఎలా లెక్కిస్తారు
WCAG 2.1 రెండు రంగుల సాపేక్ష ల్యూమినెన్స్‌ను పోలుస్తుంది: లేత రంగుకు 0.05 కలిపి, ముదురు రంగుకు 0.05 కలిపినదానితో భాగించాలి. ఫలితం 1:1 (ఒకే రంగులు) నుండి 21:1 (తెలుపుపై నలుపు) వరకు ఉంటుంది. AA స్థాయిలో సాధారణ టెక్స్ట్కు కనీసం 4.5:1, పెద్ద టెక్స్ట్కు (18 పాయింట్ లేదా 14 పాయింట్ బోల్డ్) 3:1 కావాలి; AAA స్థాయి దీన్ని 7:1, 4.5:1కి పెంచుతుంది. ఇన్‌పుట్ బోర్డర్లు, ఐకాన్‌ల వంటి యూజర్ ఇంటర్‌ఫేస్ భాగాలకు సక్సెస్ క్రైటీరియా 1.4.11 ప్రకారం చుట్టుపక్కలతో 3:1 కావాలి.
ల్యూమినెన్స్ ఆకుపచ్చకు నీలం కంటే చాలా ఎక్కువ బరువు ఇస్తుంది, ఎందుకంటే కంటికి దానిపై సున్నితత్వం ఎక్కువ. అందుకే రెండు రంగులూ పూర్తి సాచురేటెడ్‌గా కనిపించినా, తెలుపుపై పసుపు టెక్స్ట్ ఘోరంగా విఫలమవుతుంది, తెలుపుపై ముదురు నీలం సులభంగా ఉత్తీర్ణమవుతుంది. లోగోలు, కేవలం అలంకరణ టెక్స్ట్ ఈ నియమం నుండి మినహాయింపు.
ఫోటో లేదా లోగో నుండి పాలెట్ తీయడం
ఇమేజ్ పాలెట్ మీ ఫైల్ను బ్రౌజర్ కాన్వాస్‌తో చదివి, పొడవైన వైపు గరిష్టంగా 200 పిక్సెల్‌లకు తగ్గించి, 1982లో Paul Heckbert వివరించిన మీడియన్-కట్ పద్ధతితో సారూప్య పిక్సెల్‌లను సమూహపరుస్తుంది: ఆరు సమూహాలు మిగిలేవరకు రంగు పరిధిని దాని విశాలమైన ఛానల్ వెంట పదేపదే విభజిస్తారు, ప్రతి సమూహ సగటు ఒక స్వాచ్ అవుతుంది. పారదర్శక పిక్సెల్‌లను విస్మరిస్తారు, కాబట్టి పారదర్శక నేపథ్యంపై ఉన్న లోగో ఇస్తే లోగో రంగులే వస్తాయి.
రంగులు తెలిశాక, ఫ్లాట్ లోగో తరచుగా వెక్టర్‌గా బాగా పనిచేస్తుంది. ఇమేజ్ నుండి SVG కన్వర్టర్ ఈ ఖచ్చితమైన రంగులను ఉంచుతూ దాన్ని ఆకారాలుగా ట్రేస్ చేస్తుంది; ఛానల్ హెడర్ డిజైన్ చేస్తుంటే, YouTube బ్యానర్ రీసైజర్ సేఫ్ ఏరియాను దృష్టిలో ఉంచుకుని ఆర్ట్‌వర్క్‌ను 2560 × 1440కి సరిచేస్తుంది.
తరచుగా అడిగే ప్రశ్నలు
- CSS "green" రంగు RGB పికర్లోని ఆకుపచ్చ కంటే ఎందుకు ముదురుగా ఉంటుంది?
- కీవర్డ్ green అంటే #008000, పాత 16-రంగుల HTML పాలెట్ నుండి వచ్చిన మధ్యస్థ ఆకుపచ్చ. పూర్తిగా సాచురేటెడ్ #00FF00ను lime అంటారు. పూర్తి CSS జాబితాలో ఇలాంటి ఆశ్చర్యాలు ఉన్నాయి: gray (#808080) darkgray (#A9A9A9) కంటే ముదురుగా ఉంటుంది.
- పాలెట్ తీసేటప్పుడు నా ఇమేజ్ అప్లోడ్ అవుతుందా?
- లేదు. ఫైల్ను మీ బ్రౌజర్ తెరిచి, మెమరీలో కాన్వాస్పై గీసి, అక్కడే విశ్లేషిస్తుంది. ఇమేజ్తో ఎలాంటి రిక్వెస్ట్ వెళ్లదు, ట్యాబ్ మూసివేస్తే అది తొలగిపోతుంది.
- సాధారణ టెక్స్ట్కు ఎంత కాంట్రాస్ట్ నిష్పత్తి అవసరం?
- WCAG 2.1 AA స్థాయికి కనీసం 4.5:1, AAA స్థాయికి 7:1. 18 పాయింట్ లేదా అంతకంటే పెద్ద, లేదా 14 పాయింట్ బోల్డ్ హెడ్డింగ్లకు AAకి 3:1 సరిపోతుంది. మసక స్క్రీన్లపై, ఎండలో టెక్స్ట్ చదవగలిగేలా ఉండడానికి చాలా డిజైన్ సిస్టమ్లు అన్నిచోట్లా 4.5:1 లక్ష్యంగా పెట్టుకుంటాయి.
- పారదర్శకతతో కూడిన 8 అంకెల HEX కోడ్ వాడవచ్చా?
- అవును, CSSలో. చివరి రెండు అంకెలు ఆల్ఫా ఛానల్, కాబట్టి #2F6FED80 అదే నీలం సుమారు 50% అపారదర్శకతతో ఉంటుంది. ఈ పికర్ అపారదర్శక రంగులతో పనిచేస్తుంది, అందుకే ఆరు అంకెలు చూపిస్తుంది; అవసరమైనప్పుడు ఆల్ఫా జతను మీరే జోడించండి.
- CSSలో ఎన్ని పేరున్న రంగులు ఉన్నాయి?
- CSS Color Module Level 4 gray, grey వంటి నకిలీ స్పెల్లింగ్లను కలిపి 148 రంగు కీవర్డ్లను నిర్వచిస్తుంది. తాజాది rebeccapurple (#663399), CSS రచయిత Eric Meyer కుమార్తె Rebecca Meyer జ్ఞాపకార్థం 2014లో చేర్చారు.