ಬಣ್ಣ ಕೋಡ್ ಜನರೇಟರ್ ಮತ್ತು ಪಿಕರ್

ಬಣ್ಣ ಕೋಡ್‌ಗಳನ್ನು, ಬದಲಾವಣೆಗಳನ್ನು, ಸಮ್ಮಿಲನಗಳನ್ನು ರಚಿಸಿ, ಮತ್ತು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತಗಳನ್ನು ಪರಿಶೀಲಿಸಿ.

ಬಣ್ಣ ಪರಿವರ್ತನೆ

HEX

#f2f2f2

Concrete

HEX
#f2f2f2
HSL
0, 0, 95
RGB
242, 242, 242
XYZ
84, 89, 97
CMYK
0, 0, 0, 5
LUV
95,16,7
LAB
95, 0, 0
HWB
0, 95, 5

ವೈವಿಧ್ಯತೆಗಳು

ಈ ವಿಭಾಗದ ಉದ್ದೇಶವು ನಿಮ್ಮ ಆಯ್ಕೆ ಮಾಡಿದ ಬಣ್ಣದ ಶುದ್ಧ ಬಿಳಿ ಸೇರಿಸಿದ ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಶುದ್ಧ ಕಪ್ಪು ಸೇರಿಸಿದ ಷೇಡ್‌ಗಳನ್ನು 10% ಹೆಚ್ಚಳದಲ್ಲಿ ನಿಖರವಾಗಿ ಉತ್ಪಾದಿಸುವುದು.

ಪ್ರೊ ಟಿಪ್: ಹೋವರ್ ಸ್ಥಿತಿಗಳು ಮತ್ತು ನೆರಳುಗಳಿಗೆ ಷೇಡ್‌ಗಳನ್ನು ಬಳಸಿ, ಹೈಲೈಟ್‌ಗಳು ಮತ್ತು ಹಿನ್ನೆಲೆಗಳಿಗೆ ಟಿಂಟ್‌ಗಳನ್ನು ಬಳಸಿ.

ಷೇಡ್‌ಗಳು

ನಿಮ್ಮ ಮೂಲ ಬಣ್ಣಕ್ಕೆ ಕಪ್ಪು ಸೇರಿಸುವ ಮೂಲಕ ರಚಿಸಲಾದ ಗಾಢವಾದ ವೈವಿಧ್ಯತೆಗಳು.

ಟಿಂಟ್‌ಗಳು

ನಿಮ್ಮ ಮೂಲ ಬಣ್ಣಕ್ಕೆ ಬಿಳಿ ಸೇರಿಸುವ ಮೂಲಕ ರಚಿಸಲಾದ ಹಗುರವಾದ ವೈವಿಧ್ಯತೆಗಳು.

ಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು

  • UI ಘಟಕ ಸ್ಥಿತಿಗಳು (ಹೋವರ್, ಸಕ್ರಿಯ, ಅಸಮರ್ಥ)
  • ನೆರಳುಗಳು ಮತ್ತು ಹೈಲೈಟ್‌ಗಳೊಂದಿಗೆ ಆಳವನ್ನು ಸೃಷ್ಟಿಸುವುದು
  • ಸಮತೋಲನ ಬಣ್ಣ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸುವುದು

ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಟಿಪ್

ಈ ವೈವಿಧ್ಯತೆಗಳು ಸಮಗ್ರ ಬಣ್ಣ ಪ್ಯಾಲೆಟ್‌ನ ಅಡಿಪಾಯವನ್ನು ರೂಪಿಸುತ್ತವೆ. ನಿಮ್ಮ ಸಂಪೂರ್ಣ ಯೋಜನೆಯಾದ್ಯಂತ ಸಮ್ಮಿಲಿತತೆಯನ್ನು ಕಾಪಾಡಲು ಅವುಗಳನ್ನು ರಫ್ತು ಮಾಡಿ.

ಬಣ್ಣ ಸಂಯೋಜನೆಗಳು

ಪ್ರತಿ ಸಮ್ಮಿಲನಕ್ಕೆ ತನ್ನದೇ ಆದ ಮನೋಭಾವವಿದೆ. ಒಟ್ಟಿಗೆ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುವ ಬಣ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ತಯಾರಿಸಲು ಸಮ್ಮಿಲನಗಳನ್ನು ಬಳಸಿ.

ಹೆಗೆ ಬಳಸುವುದು

ಯಾವುದೇ ಬಣ್ಣದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ ಅದರ ಹೆಕ್ಸ್ ಮೌಲ್ಯವನ್ನು ನಕಲಿಸಲು. ಈ ಸಂಯೋಜನೆಗಳು ದೃಶ್ಯ ಸಮ್ಮಿಲನವನ್ನು ರಚಿಸಲು ಗಣಿತೀಯವಾಗಿ ಸಾಬೀತಾಗಿವೆ.

ಇದು ಏಕೆ ಮುಖ್ಯ

ಬಣ್ಣ ಸಮ್ಮಿಲನಗಳು ಸಮತೋಲನವನ್ನು ಸೃಷ್ಟಿಸುತ್ತವೆ ಮತ್ತು ನಿಮ್ಮ ವಿನ್ಯಾಸಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಭಾವನೆಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತವೆ.

ಪೂರಕ

ಬಣ್ಣ ಮತ್ತು ಅದರ ವಿರುದ್ಧ ಬಣ್ಣ ಚಕ್ರದಲ್ಲಿ, +180 ಡಿಗ್ರಿಗಳ ಹ್ಯೂ. ಹೆಚ್ಚಿನ ವಿರೋಧಾಭಾಸ.

#f2f2f2
ಉತ್ತಮವಾಗಿದೆ: ಹೆಚ್ಚಿನ ಪರಿಣಾಮಕಾರಿ ವಿನ್ಯಾಸಗಳು, CTAಗಳು, ಲೋಗೋಗಳು

ವಿಭಜಿತ ಪೂರಕ

ಒಂದು ಬಣ್ಣ ಮತ್ತು ಅದರ ಪೂರಕದ ಪಕ್ಕದ ಎರಡು, ಮುಖ್ಯ ಬಣ್ಣದ ವಿರುದ್ಧದ ಮೌಲ್ಯದಿಂದ +/-30 ಡಿಗ್ರಿಗಳ ಹ್ಯೂ. ನೇರ ಪೂರಕದಂತೆ ಧೈರ್ಯಶಾಲಿ, ಆದರೆ ಹೆಚ್ಚು ಬಹುಮುಖ.

ಉತ್ತಮವಾಗಿದೆ: ಚೈತನ್ಯಮಯ ಆದರೆ ಸಮತೋಲನ ಹೊಂದಿದ ವಿನ್ಯಾಸಗಳು

ತ್ರೈಕೋನ

ಬಣ್ಣ ಚಕ್ರದಲ್ಲಿ ಸಮಾನವಾಗಿ ಅಂತರವಿರುವ ಮೂರು ಬಣ್ಣಗಳು, ಪ್ರತಿ 120 ಡಿಗ್ರಿಗಳ ಹ್ಯೂ ಅಂತರ. ಒಂದು ಬಣ್ಣವನ್ನು ಪ್ರಭಾವಿ ಮಾಡಲು ಮತ್ತು ಇತರವನ್ನು ಅಲಂಕಾರವಾಗಿ ಬಳಸಲು ಉತ್ತಮವಾಗಿದೆ.

ಉತ್ತಮವಾಗಿದೆ: ಆಟೋಪಾಯ, ಶಕ್ತಿಯುತ ವಿನ್ಯಾಸಗಳು

ಸಮಾನಾಂತರ

ಅದೇ ಪ್ರಕಾಶಮಾನತೆ ಮತ್ತು ತೃಪ್ತಿಯ ಮೂರು ಬಣ್ಣಗಳು, ಬಣ್ಣ ಚಕ್ರದಲ್ಲಿ ಪಕ್ಕದಲ್ಲಿರುವ ಹ್ಯೂಗಳು, 30 ಡಿಗ್ರಿಗಳ ಅಂತರ. ಸ್ಮೂತ್ ಪರಿವರ್ತನೆಗಳು.

ಉತ್ತಮವಾಗಿದೆ: ನೈಸರ್ಗಿಕ ಪ್ರೇರಿತ, ಶಾಂತಕರ ಇಂಟರ್ಫೇಸ್ಗಳು

ಏಕವರ್ಣ

ಅದೇ ಹ್ಯೂನ ಮೂರು ಬಣ್ಣಗಳು, ಪ್ರಕಾಶಮಾನತೆ ಮೌಲ್ಯಗಳು +/-50%. ಸೂಕ್ಷ್ಮ ಮತ್ತು ಸುಧಾರಿತ.

ಉತ್ತಮವಾಗಿದೆ: ಕನಿಷ್ಠ, ಸುಧಾರಿತ ವಿನ್ಯಾಸಗಳು

ಚತುಷ್ಪಾದ

ಹ್ಯೂನ 60 ಡಿಗ್ರಿಗಳಿಂದ ಬೇರ್ಪಟ್ಟಿರುವ ಎರಡು ಸೆಟ್‌ಗಳ ಪೂರಕ ಬಣ್ಣಗಳು.

ಉತ್ತಮವಾಗಿದೆ: ಸಮೃದ್ಧ, ವೈವಿಧ್ಯಮಯ ಬಣ್ಣ ಯೋಜನೆಗಳು

ಬಣ್ಣ ಸಿದ್ಧಾಂತ ತತ್ವಗಳು

ಸಮತೋಲನ

ಒಂದು ಪ್ರಭಾವಿ ಬಣ್ಣವನ್ನು ಬಳಸಿ, ದ್ವಿತೀಯಿಕದೊಂದಿಗೆ ಬೆಂಬಲಿಸಿ, ಮತ್ತು ಅಲಂಕಾರವನ್ನು ಕಡಿಮೆ ಬಳಸಿ.

ವಿರೋಧಾಭಾಸ

ಓದುವಿಕೆ ಮತ್ತು ಪ್ರವೇಶಾತಿಗಾಗಿ ಸಾಕಷ್ಟು ವಿರೋಧಾಭಾಸವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಸಮರಸತೆ

ಬಣ್ಣಗಳು ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡಬೇಕು ಮತ್ತು ಏಕೀಕೃತ ದೃಶ್ಯ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸಬೇಕು.

ಬಣ್ಣ ವ್ಯತ್ಯಾಸ ತಪಾಸಕ

ಪಠ್ಯ ಓದಲು ಯೋಗ್ಯತೆಯಿಗಾಗಿ WCAG ಪ್ರವೇಶಾತಿ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸಲು ಬಣ್ಣ ಸಂಯೋಜನೆಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.

ಪಠ್ಯ ಬಣ್ಣ
ಹಿನ್ನಲೆ ಬಣ್ಣ
ವ್ಯತ್ಯಾಸ
1.00
Fail
ಅತ್ಯಂತ ದಯನೀಯ
ಸಣ್ಣ ಪಠ್ಯ
✖︎
ದೊಡ್ಡ ಪಠ್ಯ
✖︎
WCAG ಮಾನದಂಡಗಳು
AA:ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ವ್ಯತ್ಯಾಸ ಅನುಪಾತ ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 3:1. ಹೆಚ್ಚಿನ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿದೆ.
AAA:ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ 7:1 ಹೆಚ್ಚಿದ ವ್ಯತ್ಯಾಸ ಅನುಪಾತ ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 4.5:1. ಉತ್ತಮ ಪ್ರವೇಶಾತಿಗಾಗಿ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ.
ಎಲ್ಲಾ ಪಠ್ಯ ಗಾತ್ರಗಳಿಗೆ ಅಪ್ರಮಾಣಿತ ವ್ಯತ್ಯಾಸ - WCAG ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುವುದಿಲ್ಲ.

ಸುಧಾರಿತ ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್

ಸ್ಲೈಡರ್‌ಗಳೊಂದಿಗೆ ಸೂಕ್ಷ್ಮವಾಗಿ ಹೊಂದಿಸಿ, ಬಹು ಪೂರ್ವದೃಶ್ಯಗಳು ಮತ್ತು ಇನ್ನಷ್ಟು

ಎಲ್ಲರೂ ಪ್ರತಿಭಾವಂತರು. ಆದರೆ ನೀವು ಮೀನು ಹತ್ತಲು ಮರವನ್ನು ಹತ್ತಲು ಅದರ ಸಾಮರ್ಥ್ಯವನ್ನು ತೀರ್ಮಾನಿಸಿದರೆ, ಅದು ತನ್ನ ಸಂಪೂರ್ಣ ಜೀವನವನ್ನು ಮೂರ್ಖ ಎಂದು ನಂಬುತ್ತದೆ.

- Albert Einstein

ತಾಂತ್ರಿಕ ಸ್ವರೂಪಗಳು

ಪ್ರಾಯೋಗಿಕ ಸ್ವರೂಪಗಳು

ಬಣ್ಣ ವಿಶ್ಲೇಷಣೆ

ಬ್ಲೈಂಡ್ನೆಸ್ ಸಿಮ್ಯುಲೇಟರ್

ಸೃಜನಾತ್ಮಕ ಅಂಶಗಳು