24 |
25 |
26 |
27 |
28 |
39 |
40 |
41 |
42 | How does this work?
43 |
44 | - Change each non-hex character to a 0.
45 | - Add 0's to the string until its length is a multiple of 3.
46 | - Divide string into 3 equal parts.
47 | - While the length of the sub-strings is greater than 2, and all three of the sub-strings begin with a 0, remove the leading 0s from each string.
48 | - If the length of the sub-strings is still greater than 2, then truncate each substring to 2 characters.
49 |
50 |
51 | Source: Why do weird things in font color attribute produce real colors?
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | Convert a random string to css color
3 |
4 | randomstringtocsscolor.com
5 |
6 | This implementation is very simple :D
7 |
8 | # 2013 by Tim Pietrusky
9 | # timpietrusky.com
10 | **/
11 |
12 | var output = document.querySelector('.output'),
13 | output_rgba = document.querySelector('.output.rgba'),
14 | input = document.querySelector('input'),
15 | body = document.body;
16 |
17 | // Listen to keyup
18 | input.addEventListener('keyup', function(e) {
19 | var value = this.value,
20 | result = "";
21 |
22 | try {
23 | value = value.split('');
24 |
25 | // Filter non hex values
26 | for (var i = 0; i < value.length; i++) {
27 | var val = value[i];
28 |
29 | if (!/^[0-9A-F]{1}$/i.test(val)) {
30 | val = 0;
31 | }
32 |
33 | result += val;
34 | }
35 |
36 | // Multiple of 3
37 | if (result.length % 3) {
38 | result += Array((3 - result.length % 3) + 1).join("0");
39 | }
40 |
41 | // Multiple of 6
42 | if (result.length % 6) {
43 | // result += Array((6 - result.length % 6) + 1).join("0");
44 | }
45 |
46 | // Split in 3 groups with equal size
47 | var regexp = new RegExp("([A-Z0-9]{"+result.length / 3+"})", "i");
48 | result = result.split(regexp);
49 |
50 | // Remove first 0 (if there is one at first postion of every group
51 | if (result[1].length > 2) {
52 | if (result[1].charAt(0) == result[3].charAt(0) == result[5].charAt(0) == 0) {
53 | result[1] = result[1].substr(1);
54 | result[3] = result[3].substr(1);
55 | result[5] = result[5].substr(1);
56 | }
57 | }
58 |
59 | // Truncate (first 2 chars stay, the rest gets deleted)
60 | result[1] = result[1].slice(0, 2);
61 | result[3] = result[3].slice(0, 2);
62 | result[5] = result[5].slice(0, 2);
63 |
64 | // Add element if color consists of just 1 char per color
65 | if (result[1].length == 1) {
66 | result[1] += result[1];
67 | result[3] += result[3];
68 | result[5] += result[5];
69 | }
70 |
71 | // Output
72 | output.innerText = "#"+result[1] + result[3] + result[5];
73 |
74 | // Convert to RGB
75 | r = parseInt(result[1], 16);
76 | g = parseInt(result[3], 16);
77 | b = parseInt(result[5], 16);
78 |
79 | body.setAttribute('style', 'background-color:rgba('+r+','+g+','+b+',.8)');
80 | output_rgba.innerText = 'rgba('+r+','+g+','+b+',.8)';
81 |
82 | } catch(e) {
83 | body.setAttribute('style', 'background-color:none');
84 | output.innerText = output_rgba.innerText = "";
85 | }
86 | });
--------------------------------------------------------------------------------