ColorMix/index.html at main · deftio/ColorMix · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html><head>
<!--
This file autogenerated by docbat.js (https://npmjs.com/docbat)
Any manual edits may be lost.
-->
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<style>
*{box-sizing:border-box;}
.bw-def-page-setup{height:100%;width:90%;margin:0 auto;padding-left:2%;padding-right:2%;left:0;top:1%;box-sizing:border-box;}
.bw-font-serif{font-family:Times New Roman, Times, serif;}
.bw-font-sans-serif{font-family:Arial, Helvetica, sans-serif;}

.bw-left{text-align:left;}
.bw-right{text-align:right;}
.bw-center{text-align:center;margin:0 auto;}
.bw-justify{text-align:justify;}
.bw-code{font-family:monospace;white-space:pre-wrap;}
.bw-pad1{padding-left:1%;padding-right:1%;}

.bw-table{border-collapse:collapse;border-spacing:0;border:1px solid #444;}
.bw-table th{background-color:#bbb;padding:4px;border:1px solid #444;}
.bw-table td{padding:4px;border:1px solid #444;}
.bw-table-stripe tr:nth-child(even){background-color:#f0f0f0;}
.bw-table tr td:first-child{font-weight:700;}
.bw-table-border-round{border-radius:2px;}
.bw-table-sort-upa::after{content:"\2191";}
.bw-table-sort-dna::after{content:"\2193";}
.bw-table-sort-xxa::after{content:"\00a0";}

.bw-tab-item-list{margin:0;padding-inline-start:0;}
.bw-tab-item{display:inline;padding-top:0.5em;padding-left:0.75em;padding-right:0.75em;border-top-right-radius:7px;border-top-left-radius:7px;}
.bw-tab-active{font-weight:700;}
.bw-tab:hover{cursor:pointer;font-weight:700;}
.bw-tab-content-list{margin:0;padding-top:0.0em;}
.bw-tab-content{display:none;border-radius:0;}
.bw-tab-content, .bw-tab-active{background-color:#ddd;padding:0.5em;}

.bw-accordian-container > div{padding:0.5em;}

.bw-container{margin:0 auto;}
.bw-row{width:100%;display:block;}
.bw-row [class^="bw-col"]{float:left;}
.bw-row::after{content:"";display:table;clear:both;}
.bw-box-1{padding-top:10px;padding-bottom:10px;border-radius:8px;}

.bw-sign{position:inherit;display:table;height:100%;width:100%;}
.bw-sign > div{display:table-cell;vertical-align:middle;}
.bw-sign > div > div{text-align:center;}

.bw-hide{display:none;}
.bw-show{display:block;}
.bw-h1{font-size:2.312rem;}
.bw-h2{font-size:1.965rem;}
.bw-h3{font-size:1.67rem;}
.bw-h4{font-size:1.419rem;}
.bw-h5{font-size:1.206rem;}
.bw-h6{font-size:1.025rem;}

.bw-col-1{width:8.333%;}
.bw-col-2{width:16.666%;}
.bw-col-3{width:25%;}
.bw-col-4{width:33.333%;}
.bw-col-5{width:41.666%;}
.bw-col-6{width:50%;}
.bw-col-7{width:58.333%;}
.bw-col-8{width:66.666%;}
.bw-col-9{width:75%;}
.bw-col-10{width:83.333%;}
.bw-col-11{width:91.666%;}
.bw-col-12{width:100%;}

.bw-color-color {color:#000}
.bw-color-background-color {background-color:#ddd}
.bw-color-active {active:#222}
.bw-thm-light
{
  color: #020202 !important;;
  background-color: #e2e2e2 !important;;
}
.bw-thm-dark
{
  color: #e2e2e2 !important;;
  background-color: #020202 !important;;
}
@media only screen and (min-width: 540px) {.bw-def-page-setup {width: 96%;}}
@media only screen and (min-width: 720px) {.bw-def-page-setup {width: 92%;}}
@media only screen and (min-width: 960px) {.bw-def-page-setup {width: 88%;}}
@media only screen and (min-width: 1100px){.bw-def-page-setup {width: 86%;}}
@media only screen and (min-width: 1600px){.bw-def-page-setup {width: 84%;}}

</style><style>
.dbat {padding-left: 10%; padding-right: 10%;}


</style><link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body class="bw-def-page-setup bw-font-sans-serif dbat" ><br><br><h1 id="colormix">ColorMix</h1>
<p>A simple html color mixer for exploring RGB (additive light) vs CMY (subtrative light) colors written in pure HTML.</p>
<p>If you download this <a href="https://github.com/deftio/ColorMix">repo</a> can you view the files in this repo in your browser locally as well.</p>
<h2 id="online-demos-here">Online Demos here:</h2>
<p><a href="https://deftio.github.io/ColorMix/colors.html">RGB and CMY Colors</a> - a quick demo with sliders allowing you to see different colors</p>
<p><a href="https://deftio.github.io/ColorMix/additive.html">Additive Colors</a> - a quick demo on mixing RGB colors</p>
<p><a href="https://deftio.github.io/ColorMix/subtractive.html">Subtractive Colors</a> - quick demo on mixing CMY colors.</p>
<h2 id="about-additive-and-subtractive-light-and-colors">About Additive and Subtractive Light and Colors</h2>
<p>Color perception begins with light, which can be thought of as composed of various colors. When light strikes an object, some colors are absorbed and others are reflected or transmitted. The specific colors that are reflected or transmitted determine the color of the object as perceived by a viewer.</p>
<p>Our ability to see and interpret these colors relies on the specialized cells in our eyes known as cones and rods, which are located on the retina at the back of the eye. Rods are more numerous and are highly sensitive to light, allowing us to see in low-light conditions, but they do not detect color. Cones, on the other hand, are sensitive to color and come in three types, each responsive to different wavelengths of light corresponding to red, green, or blue.</p>
<p>When light enters the eye, it is focused by the lens onto the retina, where it strikes the cones and rods. The cones, reacting to the light, send signals to the brain based on the mix of wavelengths they detect. The brain interprets these signals as colors through a process called color vision. For instance, when red and green wavelengths hit the cones, the brain might see yellow if both are stimulated equally.</p>
<p>This system of color detection and interpretation allows us to perceive a full spectrum of colors from different combinations of red, green, and blue light, explaining how we can see such a vast and nuanced array of colors in the world around us.</p>
<h3 id="additive-colors">Additive Colors</h3>
<p>Additive color mixing begins with black, or the absence of light, similar to what you would see in a completely dark room. When light is added to this darkness, it creates color. For example, with light sources like projectors or screens, primary colors of light (red, green, and blue) are combined in various ways to produce new colors:</p>
<p>Red and green light combine to make yellow.
Green and blue light mix to create cyan.
Blue and red light join to form magenta.
When all three primary lights mix, the result is white light. This method is used in digital screens, where tiny pixels emit different levels of these three colors to make up all the colors you see on the device.</p>
<h3 id="subtractive-colors">Subtractive Colors</h3>
<p>Subtractive color mixing starts with white light, which includes all colors. This method is used in painting and printing, where colors are created by removing light. The primary colors in this method are cyan, magenta, and yellow, which correspond to the primary colors of light they absorb:</p>
<p>Cyan absorbs red light but reflects green and blue.
Magenta absorbs green light but reflects red and blue.
Yellow absorbs blue light but reflects red and green.
Mixing these pigments subtracts more wavelengths of light:</p>
<p>Combining cyan and magenta produces blue.
Mixing cyan and yellow results in green.
Joining yellow and magenta creates red.
Mixing all three subtractive colors ideally absorbs all light, resulting in black, though in practice, it often results in a dark brown or gray due to impurities in the colors.</p>
<h3 id="last-thoughts">Last Thoughts</h3>
<p>Additive color mixing involves combining colored light, where adding more colors brings the result closer to white.
Subtractive color mixing involves combining pigments, where adding more colors leads to less light being reflected, moving the result closer to black.
These processes allow for the reproduction of a wide spectrum of colors in various media, from art to industrial applications.</p>
<br><br>
</body></html>