DevToys Web Pro iconDevToys Web Proబ్లాగ్
మాకు రేటింగ్ ఇవ్వండి:
బ్రౌజర్ ఎక్స్‌టెన్షన్‌ను ప్రయత్నించండి:

రంగుల సమన్వయాల జనరేటర్

  • బేస్
    స్కీమ్
    Base + opposite (180°)
    #3B82F6base
    rgb(59, 130, 246)
    hsl(217, 91%, 60%)
    #F6AF3Ccomplement (180°)
    rgb(246, 175, 60)
    hsl(37, 91%, 60%)
    సాంకేతిక వివరాలు

    కలర్ హార్మనీస్ జనరేటర్ ఎలా పనిచేస్తుంది

    ఈ టూల్ ఏమి చేస్తుంది

    కలర్ హార్మనీస్ జనరేటర్ ఒకే బేస్ హ్యూ నుంచి గణితపరంగా సంబంధిత రంగు సెట్‌లను లెక్కిస్తుంది: కాంప్లిమెంటరీ, అనలాగస్, ట్రైయాడిక్, టెట్రాడిక్, స్క్వేర్, స్ప్లిట్-కాంప్లిమెంటరీ, మోనోక్రోమాటిక్, మరియు షేడ్స్. ప్రతి ప్యాలెట్‌ను HEX, RGB, మరియు HSL విలువలతో రెండర్ చేస్తుంది; మీరు వాటిని ఒక క్లిక్‌తో కాపీ చేసి CSS లేదా డిజైన్ టోకెన్స్‌లో నేరుగా ఉపయోగించవచ్చు.

    డెవలపర్ల సాధారణ వినియోగ సందర్భాలు

    డిజైనర్లు వేర్వేరు హార్మనీ నియమాల కింద ఒక బ్రాండ్ హ్యూ ఎలా మారుతుందో అన్వేషించి బ్రాండ్ ప్యాలెట్‌లను ప్రోటోటైప్ చేస్తారు. ఫ్రంట్‌ఎండ్ డెవలపర్లు ప్రైమరీ బ్రాండ్ రంగు నుంచి బటన్‌లు, అలర్ట్‌లు, మరియు బ్యాడ్జ్‌ల కోసం యాక్సెంట్ రంగులను సీడ్ చేస్తారు. డేటా విజ్ ఇంజినీర్లు ఉద్దేశపూర్వకంగా కనిపించే కానీ వేరు చేయగలిగే కేటగరికల్ కలర్ సెట్‌లను ఎంచుకుంటారు. ప్రొడక్ట్ మేనేజర్లు ప్రత్యేక డిజైన్ టూలింగ్ అవసరం లేకుండా డిజైన్ ప్రతిపాదనలను సమీక్షించే సమయంలో ప్యాలెట్ ఎంపికలను పోల్చుతారు.

    డేటా ఫార్మాట్‌లు, రకాలు, లేదా వేరియంట్లు

    ఎనిమిది స్కీమ్స్ అందుబాటులో ఉన్నాయి: Complementary (base + 180°), Analogous (base ± 30°), Triadic (3 colors 120° apart), Tetradic (rectangular 4-color), Square (4 colors 90° apart), Split-complementary (base + ±150°), Monochromatic (same hue at varying lightness 10–90%), మరియు Shades (same hue, dark to light). ప్రతి రంగులో దాని HEX, RGB, మరియు HSL ప్రతినిధ్యాలు రోల్ లేబల్‌తో పాటు ఉంటాయి.

    సాధారణ తప్పిదాలు మరియు ఎడ్జ్ కేసులు

    అత్యంత డీసాచ్యురేటెడ్ లేదా గ్రేకు దగ్గరగా ఉన్న బేస్ రంగుల నుంచి వచ్చిన హార్మనీలు స్కీమ్స్ అంతటా వేరు చేయలేనివిగా కనిపిస్తాయి — సాచ్యురేటెడ్ బేస్‌తో ప్రారంభించండి. ట్రైయాడిక్ లేదా టెట్రాడిక్ స్కీమ్స్‌తో కలిపిన అత్యంత సాచ్యురేటెడ్ బేస్‌లు గట్టిగా, బ్యాలెన్స్ చేయడం కష్టమైన ప్యాలెట్‌లను ఇవ్వవచ్చు; UI ఉపయోగం కోసం సాచ్యురేషన్‌ను కొంచెం తగ్గించడం పరిగణించండి. హార్మనీల నుంచి వచ్చిన కొన్ని జోడీలు WCAG కాంట్రాస్ట్‌ను తీరకపోవచ్చు — విడుదలకు ముందు Color Contrast టూల్‌లో టెక్స్ట్/బ్యాక్‌గ్రౌండ్ జోడీలను ఎప్పుడూ ధృవీకరించండి.

    కోడ్‌తో పోల్చితే ఈ టూల్‌ను ఎప్పుడు ఉపయోగించాలి

    ఐడియేషన్, త్వరిత అన్వేషణ, మరియు డిజైన్ రివ్యూ కోసం బ్రౌజర్ టూల్‌ను ఉపయోగించండి. కోడ్‌లో chroma.js, colord, లేదా culori వంటి లైబ్రరీలు హార్మనీలను ప్రోగ్రామాటిక్‌గా లెక్కించడానికి, వాటిని డిజైన్-టోకెన్ బిల్డ్ పైప్‌లైన్లలో ఇంటిగ్రేట్ చేయడానికి, మరియు మరింత సమానంగా కనిపించే ప్యాలెట్‌ల కోసం Oklch వంటి పర్సెప్ట్యువల్లీ యూనిఫాం కలర్ స్పేస్‌లతో హార్మనీ మ్యాత్‌ను కలపడానికి సహాయపడతాయి.