nKolorLib – JavaScript HSV Color Picker χωρίς Dependencies

Η nKolorLib είναι μια ελαφριά JavaScript βιβλιοθήκη HSV color picker χωρίς dependencies, που παρέχει δύο pickers και μια κλάση Color για μετατροπές και διαχείριση χρωμάτων. Στόχος της είναι να προσφέρει λειτουργικό HSV color selection χωρίς εξαρτήσεις και χωρίς δέσμευση σε συγκεκριμένο UI framework. Η βιβλιοθήκη μπορεί να χρησιμοποιηθεί σε οποιοδήποτε JavaScript project χωρίς ανάγκη για frameworks ή εξωτερικές εξαρτήσεις.

Γιατί HSV color picker

Το HSV (Hue, Saturation, Value) είναι πιο πρακτικό για επιλογή χρώματος σε σχέση με το RGB, γιατί διαχωρίζει:

• το ίδιο το χρώμα (Hue)
• την ένταση (Saturation),
• τη φωτεινότητα (Value).

 
Διαθέσιμοι HSV color pickers

Η βιβλιοθήκη παρέχει δύο διαφορετικές υλοποιήσεις:

SV Picker

2D επιφάνεια Saturation / Value με sliders για Hue και Alpha. Κατάλληλος όταν θέλεις έλεγχο πάνω σε ένταση και φωτεινότητα, κρατώντας το Hue ξεχωριστά.

HV Picker

2D επιφάνεια Hue / Value με sliders για Saturation και Alpha. Εναλλακτική διάταξη που μπορεί να ταιριάζει καλύτερα σε διαφορετικά workflows.

Κλάση Color για μετατροπές χρωμάτων

Η Color βασίζεται σε HSV + Alpha και παρέχει:

• Μετατροπή σε HEX
• Μετατροπή σε RGB
• Μετατροπή σε HSL
• Επιστροφή HSV
• Υποστήριξη alpha channel
• Εύρεση παρόμοιων χρωμάτων 
• Βοηθητικές μεθόδους μετατροπής

Έτσι αποφεύγεται η επαναλαμβανόμενη υλοποίηση conversion logic σε κάθε project.

 Χαρακτηριστικά της βιβλιοθήκης

• Δεν έχει dependencies
• Μπορεί να ενσωματωθεί σε οποιοδήποτε UI
• πλήρως scoped style μέσω prefix (.nKolorLib-*) 
• Δεν απαιτεί framework

Πότε έχει νόημα να χρησιμοποιηθεί

• Σε custom web applications με theming
• Σε εργαλεία που χρειάζονται ακριβή έλεγχο HSV
• Όταν δεν θέλεις να εξαρτάσαι από μεγάλο UI library

Χρήση σε JavaScript (ES Module)

import nKolorLib from '../nKolorLib.js';
const svPicker = nKolorLib.getSVPicker(document.getElementById("svPicker"));
const hvPicker = nKolorLib.getHVPicker(document.getElementById("hvPicker"));
const color = nKolorLib.getColor(0.5, 0.5, 0.5, 1);

Ο picker έχει αρχικό πλάτος 350px.  Το ύψος καθορίζεται αυτόματα. Για να αλλάξετε το πλάτος, προσθέστε τον παρακάτω κανόνα σε κάποιο css file:

nKolorLib-picker{
   width: 450px !important;
}

Μπορείτε να χρησιμοποιήσετε τον ίδιο κανόνα για μικρότερες οθόνες ώστε να κάνετε τον picker responsive.

Λήψη και κώδικας

Μπορείτε να κατεβάσετε την βιβλιοθήκη πατώντας εδώ.

Αποσυμπιέστε το αρχείο και τροποποιείστε την εντολή  'import nKolorLib from' σύμφωνα με τον κατάλογο που αποθηκεύσατε το αρχείο.

Η βιβλιοθήκη είναι ανοικτού λογισμικού με GPL v3.0  licence και μπορείτε να την δείτε στο Github εδώ.

Μπορείτε να δείτε online μία υλοποίηση της σε αυτό το link.