# Differences

This shows you the differences between two versions of the page.

 design_guide_color [2018/04/28 09:10]z3dev design_guide_color [2018/06/12 14:27] (current)z3dev Both sides previous revision Previous revision 2018/06/12 14:27 z3dev 2018/04/28 10:30 z3dev 2018/04/28 10:30 z3dev 2018/04/28 10:29 z3dev 2018/04/28 10:13 z3dev 2018/04/28 09:59 z3dev 2018/04/28 09:17 z3dev 2018/04/28 09:10 z3dev 2018/04/28 09:09 z3dev 2018/03/21 02:15 z3dev 2018/03/21 02:11 z3dev 2018/03/19 13:58 z3dev 2018/03/08 13:33 z3dev created Next revision Previous revision 2018/06/12 14:27 z3dev 2018/04/28 10:30 z3dev 2018/04/28 10:30 z3dev 2018/04/28 10:29 z3dev 2018/04/28 10:13 z3dev 2018/04/28 09:59 z3dev 2018/04/28 09:17 z3dev 2018/04/28 09:10 z3dev 2018/04/28 09:09 z3dev 2018/03/21 02:15 z3dev 2018/03/21 02:11 z3dev 2018/03/19 13:58 z3dev 2018/03/08 13:33 z3dev created Line 6: Line 6: ​ - color([1,​0.5,​0.3],​sphere()) + let a = color("​Red",​sphere()) - color([1,​0.5,​0.3],​sphere(10),​cube(20)) + let b = color([1, 0.5, 0.3],​sphere()) - color("​Red",​sphere(),​cube().translate([2,​0,​0])) + let c = color([1, 0.5, 0.3, 0.6],​sphere(10),​cube(20)) ​ Line 16: Line 16: ​ - sphere().setColor(1,​0.5,​0.3) + let a = object.setColor(css2rgb('​dodgerblue'​)) - sphere().setColor([1,​0.5,​0.3,​0.7]) + let b = sphere().setColor(1,​ 0.5, 0.3) - object.setColor(css2rgb('​dodgerblue'​));​ + let c = sphere().setColor([1,​ 0.5, 0.3, 0.7]) ​ - The CSG library functions use RGB values between 0 and 1, not 0 and 255. + //Note: There are known issues with transparency, and depending on the order of colors, ​objects may not seem transparent. ​Try different '​alpha'​ values or colors.// - + - Note: There are some Transparency_Sorting|OpenGL Transparency Limitations, e.g. and depending on the order of colors, ​you might not see through otherwise partially ​transparent ​objects. + === Color Space Conversion === === Color Space Conversion === Line 30: Line 28: ​ - var hsl = rgb2hsl(r,g,b); // or rgb2hsl([r,g,b]); + let rgb = css2rgb('​navy'​) - var rgb = hsl2rgb(h,s,l); // or hsl2rgb([h,s,l]); + let rgb = html2rgb('#​RRGGBB'​) - var hsv = rgb2hsv(r,​g,​b); // or rgb2hsv([r,​g,​b]); + - var rgb = hsv2rgb(h,s,v); // or hsv2rgb([h,s,v]); + let rgb = hsl2rgb(h,s,l) // or hsl2rgb([h,s,l]) + let rgb = hsv2rgb(h,s,v) // or hsv2rgb([h,s,v]) + + let hsv = rgb2hsv(r,​g,​b) // or rgb2hsv([r,​g,​b]) + let hsl = rgb2hsl(r,g,b) // or rgb2hsl([r,g,b]) + let html = rgb2html(r,​g,​b) ​ Line 41: Line 44: * h,s,v (hue, saturation, value) * h,s,v (hue, saturation, value) - E.g. to create a rainbow, t = 0..1 and .setColor(hsl2rgb(t,​1,​0.5)) - - See the http://​openjscad.org/#​examples/​slices/​tor.jscad Tor (multi-color) for an example.