What is a color harmony?

A color harmony is a combination of colors that are visually pleasing together based on their positions on the color wheel. Common harmonies include complementary (opposite colors), analogous (adjacent colors), triadic (three equally-spaced colors), tetradic (four equally-spaced colors), split-complementary (base plus two colors flanking its complement), and monochromatic (same hue with varying lightness and saturation).

What is the difference between complementary and split-complementary colors?

Complementary colors are directly opposite each other on the color wheel (180° apart), creating the highest contrast. Split-complementary uses the base color plus the two colors on either side of its complement (at 150° and 210°). Split-complementary is often easier to work with than direct complementary because the contrast is high but slightly softer, making it more versatile for design.

How do I use a generated color palette in CSS?

You can export the palette as CSS custom properties (variables) and include them in your stylesheet. For example: :root { --color-1: #3b82f6; --color-2: #f63b3b; }. Then reference them in your CSS with var(--color-1). This approach keeps colors consistent across your project and makes it easy to update your design system.

What is the HSL color model and why is it useful for generating palettes?

HSL stands for Hue (0-360), Saturation (0-100%), and Lightness (0-100%). It is more intuitive than RGB because you can adjust individual aspects of a color independently. For palette generation, HSL is ideal: you rotate the hue to get harmonious colors, keep saturation consistent to maintain color vibrancy, and vary lightness to create shades. This makes it easy to generate mathematically harmonious palettes that look great together.

ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ ಜನರೇಟರ್

ಮಾನ್ಯ

ಬಣ್ಣ ಸಾಮರಸ್ಯ

Two colors opposite on the color wheel

ರಚಿಸಿದ ಪ್ಯಾಲೆಟ್

#3b82f6

#3B82F6

RGB: 59, 130, 246

HSL: 217°, 91%, 60%

#f6af3c

#F6AF3C

RGB: 246, 175, 60

HSL: 37°, 91%, 60%

ಪ್ಯಾಲೆಟ್ ಪೂರ್ವದೃಶ್ಯ

ಪ್ಯಾಲೆಟ್ ರಫ್ತು ಮಾಡಿ

:root {
  --color-1: #3b82f6;
  --color-2: #f6af3c;
}

ತಾಂತ್ರಿಕ ವಿವರಗಳು

ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ ಜನರೇಟರ್ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ಸಾಧನ ಏನು ಮಾಡುತ್ತದೆ

ಬಣ್ಣ ಪ್ಯಾಲೆಟ್ ಜನರೇಟರ್ ಸ್ಥಾಪಿತ ಬಣ್ಣ ಸಿದ್ಧಾಂತ ತತ್ವಗಳನ್ನು ಬಳಸಿ ಯಾವುದೇ ಮೂಲ ಬಣ್ಣದಿಂದ ಸಮ್ಮಿಲಿತ ಬಣ್ಣ ಯೋಜನೆಗಳನ್ನು ರಚಿಸುತ್ತದೆ. ಒಂದು ಮೂಲ ಬಣ್ಣವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ ಮತ್ತು ಆರು ಸಮ್ಮಿಲನ ಪ್ರಕಾರಗಳಲ್ಲಿ ಒಂದನ್ನು — ಪೂರಕ, ಸಮಾನಾಂತರ, ತ್ರಯಿಕ, ಚತುಷ್ಕ, ವಿಭಜಿತ-ಪೂರಕ, ಅಥವಾ ಏಕವರ್ಣ — ಆಯ್ಕೆ ಮಾಡಿ, ತಕ್ಷಣವೇ ಹೊಂದಾಣಿಕೆಯ ಪ್ಯಾಲೆಟ್ ಅನ್ನು ರಚಿಸಿ. ರಚಿಸಲಾದ ಪ್ರತಿಯೊಂದು ಬಣ್ಣವೂ CSS, ವಿನ್ಯಾಸ ಸಾಧನ, ಅಥವಾ ಶೈಲಿ ಮಾರ್ಗಸೂಚಿಗೆ ನಕಲಿಸಲು ಸಿದ್ಧವಾಗಿರುವ HEX, RGB, ಮತ್ತು HSL ಮೌಲ್ಯಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.

ಡೆವಲಪರ್‌ಗಳ ಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು

ವಿನ್ಯಾಸಕರು ಮತ್ತು ಡೆವಲಪರ್‌ಗಳು ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು ಆರಂಭಿಸುವಾಗ, ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳನ್ನು ರಚಿಸುವಾಗ, ಅಥವಾ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಗಳನ್ನು ನವೀಕರಿಸುವಾಗ ಪ್ಯಾಲೆಟ್ ಜನರೇಟರ್‌ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ. ಸಾಮಾನ್ಯ ಸಂದರ್ಭಗಳಲ್ಲಿ ಪ್ರಾಥಮಿಕ ಬ್ರ್ಯಾಂಡ್ ಬಣ್ಣಕ್ಕೆ ಪೂರಕ ಆಕ್ಸೆಂಟ್ ಬಣ್ಣಗಳನ್ನು ರಚಿಸುವುದು, ಡೇಟಾ ದೃಶ್ಯೀಕರಣಗಳಿಗೆ ಸಮಾನಾಂತರ ಬಣ್ಣ ಯೋಜನೆಗಳನ್ನು ಸೃಷ್ಟಿಸುವುದು, ಜೀವಂತ UI ಥೀಮ್‌ಗಳಿಗೆ ತ್ರಯಿಕ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು, ಮತ್ತು ಕನಿಷ್ಠ ವಿನ್ಯಾಸಗಳಿಗೆ ಏಕವರ್ಣ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸುವುದು ಸೇರಿವೆ. ಈ ಸಾಧನವು CSS ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿ ಸೆಟ್‌ಗಳು ಮತ್ತು ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಿಗೆ JSON ಬಣ್ಣ ಟೋಕನ್‌ಗಳನ್ನು ರಚಿಸಲು ಸಹ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಬಣ್ಣ ಸಮ್ಮಿಲನ ಪ್ರಕಾರಗಳು

ಬಣ್ಣ ಸಮ್ಮಿಲನಗಳು ಬಣ್ಣ ಚಕ್ರದ ಆಧಾರದ ಮೇಲೆ ಇರುತ್ತವೆ. ಪೂರಕ ಬಣ್ಣಗಳು ಪರಸ್ಪರ ಎದುರುಭಾಗದಲ್ಲಿ (180°) ಇರುತ್ತವೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಕಾಂಟ್ರಾಸ್ಟ್ ಸೃಷ್ಟಿಸುತ್ತವೆ. ಸಮಾನಾಂತರ ಬಣ್ಣಗಳು ಪಕ್ಕಪಕ್ಕದಲ್ಲೇ (±30°) ಇರುತ್ತವೆ ಮತ್ತು ಒಗ್ಗಟ್ಟಾಗಿ ಕಾಣಿಸುತ್ತವೆ. ತ್ರಯಿಕ ಬಣ್ಣಗಳು 120° ಅಂತರಗಳಲ್ಲಿ ಸಮವಾಗಿ ಹಂಚಲ್ಪಟ್ಟು ಸಮತೋಲನದ ಜೀವಂತಿಕೆಯನ್ನು ನೀಡುತ್ತವೆ. ಚತುಷ್ಕ (ಆಯತ) 90° ಅಂತರಗಳಲ್ಲಿ ನಾಲ್ಕು ಬಣ್ಣಗಳನ್ನು ಬಳಸುತ್ತದೆ. ವಿಭಜಿತ-ಪೂರಕವು ಒಂದು ಮೂಲ ಬಣ್ಣವನ್ನು ಅದರ ಪೂರಕದ ಪಕ್ಕದಲ್ಲಿರುವ ಎರಡು ಬಣ್ಣಗಳೊಂದಿಗೆ ಜೋಡಿಸುತ್ತದೆ. ಏಕವರ್ಣವು ಒಂದೇ ಹ್ಯೂನ ಬೆಳಕುತನ ಮತ್ತು ಸ್ಯಾಚುರೇಶನ್ ಅನ್ನು ಬದಲಿಸಿ ಸೂಕ್ಷ್ಮ, ಏಕೀಕೃತ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು

ರಚಿಸಲಾದ ಪ್ಯಾಲೆಟ್‌ಗಳು ಆರಂಭಿಕ ಹಂತಗಳು; ಅಂತಿಮ ವಿನ್ಯಾಸಗಳಲ್ಲ. ಪ್ರವೇಶಾರ್ಹತೆಯನ್ನು ಖಚಿತಪಡಿಸಲು ರಚಿಸಲಾದ ಬಣ್ಣಗಳ ನಡುವಿನ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಯಾವಾಗಲೂ ಪರಿಶೀಲಿಸಿ. ತುಂಬಾ ಸ್ಯಾಚುರೇಟೆಡ್ ಅಥವಾ ತುಂಬಾ ಗಾಢ ಮೂಲ ಬಣ್ಣಗಳು ಓದಲು ಕಷ್ಟವಾಗುವ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸಬಹುದು. ಪರದೆಯ ಬಣ್ಣಗಳು ಮುದ್ರಣದಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿ ಕಾಣಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಕೇವಲ ಸ್ವಾಚ್ ಪೂರ್ವವೀಕ್ಷಣೆಗಳ ಮೇಲೆ ಅವಲಂಬಿಸದೆ, ನಿಜವಾದ ವಿಷಯ ಮತ್ತು UI ಅಂಶಗಳ ವಿರುದ್ಧ ಪ್ಯಾಲೆಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.

ಕೋಡ್‌ಗಿಂತ ಈ ಸಾಧನವನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು

ವಿನ್ಯಾಸ ಸ್ಪ್ರಿಂಟ್‌ಗಳ ವೇಳೆ ಸಂವಾದಾತ್ಮಕ ಅನ್ವೇಷಣೆ ಮತ್ತು ತ್ವರಿತ ಪ್ಯಾಲೆಟ್ ರಚನೆಗಾಗಿ ಈ ಬ್ರೌಸರ್ ಸಾಧನವನ್ನು ಬಳಸಿ. ಉತ್ಪಾದನಾ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಿಗೆ, chroma.js, culori, ಅಥವಾ polished ಮುಂತಾದ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಪ್ಯಾಲೆಟ್ ರಚನೆಯನ್ನು ಜಾರಿಗೊಳಿಸಿ; ಇವು ಸಮ್ಮಿಲನಗಳನ್ನು ರಚಿಸಬಹುದು, ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಜಾರಿಗೊಳಿಸಬಹುದು, ಮತ್ತು ಬಿಲ್ಡ್ ಪೈಪ್‌ಲೈನ್‌ಗಳೊಂದಿಗೆ ಏಕೀಕರಿಸಬಹುದು.