# Differences

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

 design_guide_color [2018/03/08 13:33]z3dev created design_guide_color [2018/06/12 14:27] (current)z3dev 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 1: Line 1: ==== Color ==== ==== Color ==== - 2D and 3D shapes ​can exhibit different colors. And just like the other transformations,​ adding color to a shape produces a new shape, one with color. + Shapes ​can exhibit different colors. And just like the other transformations,​ adding color to a shape produces a new shape, one with color. + + //NOTE: 2D shapes cannot exhibit colors today. This is a known issue.// ​ - color([r,g,b], object, object2 ...); // for example, color([1,​1,​0],sphere()); + let a = color("​Red"​,​sphere()) - color([r,g,b], array); + let b = color([1, 0.5, 0.3],​sphere()) - color([r,g,b,a], object, object2 ​...); + let c = color([1, 0.5, 0.3, 0.6],sphere(10),cube(20)) - color([r,​g,​b,​a], array); + - color(name, object, object2 ...); // for example, color('​red'​,sphere()); + - color(name, a, object, object2 ​...); // for example, color('​red'​,0.5, sphere()); + - color(name, array); + - color(name, a, array); + ​ - Whereas ​the named colors are case-insensitive,​ e.g. '​RED'​ is the same as '​red'​. + See the [[https://​www.w3.org/​TR/​css3-color/#​svg-color | Extended Color Keywords]] for all available ​colors. Color keywords ​are case-insensitive,​ e.g. '​RED'​ is the same as '​red'​. - using CSG objects'​ built in methods (r, g, b must be between 0 and 1, not 0 and 255): + The CSG library functions can also be used. //NOTE: Deprecated in the V2 API// ​ - object.setColor([r,g,b]); + let a = object.setColor(css2rgb('​dodgerblue'​)) - object.setColor([r,g,b,a]); + let b = sphere().setColor(1, 0.5, 0.3) - object.setColor(r,g,b); + let c = sphere().setColor([1, 0.5, 0.3, 0.7]) - object.setColor(r,g,b,a); + - object.setColor(css2rgb('​dodgerblue'​)); + ​ - Examples: + //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.// - ​ + - color([1,​0.5,​0.3],​sphere(1)); ​                     ​// openscad like + - color([1,0.5,0.3],​sphere(1),​cube(2));​ + - color("​Red",​sphere(),​cube().translate([2,​0,​0])); ​  // named color (case-insensitive) + - sphere().setColor(1,​0.5,​0.3); ​                     // built in methods + === Color Space Conversion === - sphere().setColor([1,​0.5,​0.3]); ​ + - ​ + - See the [https://​www.w3.org/​TR/​css3-color/#svg-color Extended Color Keywords] for all available colors. + Following functions to convert between ​color spaces. - + - Code excerpt: + - + - o.push( color([1,​0,​0],​sphere()) ); + - o.push( color([0,​1,​0],​cube()) ); + - o.push( color([0,​0,​1],​cylinder()) ); + - + - o.push( color("​red",​sphere()) ); + - o.push( color("​green",​ cube()) ); + - o.push( color("​blue",​ cylinder()) ); + - + - for(var i=0; i<1; i+=1/12) { + - ​o.push( cube().setColor(hsl2rgb(i,​1,​0.5)) ); + - } + - ​ + - Code: ​ - function main() { + let rgb = css2rgb('​navy'​) - var o = []; + let rgb = html2rgb('#​RRGGBB'​) - for(var i=0; i<8; i++) { + - ​o.push(cylinder({r:​3,​h:​20}). + - ​setColor( + - hsl2rgb(i/​8,​1,​0.5). ​ // hsl to rgb, creating rainbow [r,g,b] + - concat(1/8+i/8)      // and add to alpha to make it [r,g,b,a] + - ​).translate([(i-3)*7.5,​0,​0]) + - ); + - } + - ​o.push(color("​red",​cube(5)).translate([-4,​-10,​0]));​ + - ​o.push(color("​red",​0.5,​cube(5)).translate([4,​-10,​0]));​ + - ​return o; + - } + - ​ + - 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. + let rgb = hsl2rgb(h,s,l) // or hsl2rgb([h,​s,​l]) + let rgb = hsv2rgb(h,​s,​v) // or hsv2rgb([h,​s,​v]) - === Color Space Conversion === + let hsv = rgb2hsv(r,g,b) // or rgb2hsv([r,g,b]) - + let hsl = rgb2hsl(r,g,b) // or rgb2hsl([r,g,b]) - Following functions to convert between color spaces. + let html = rgb2html(r,g,b) - ​ + - var hsl = rgb2hsl(r,g,b); // or rgb2hsl([r,g,b]); + - var rgb = hsl2rgb(h,​s,​l);​ // or hsl2rgb([h,​s,​l]);​ + - var hsv = rgb2hsv(r,g,b); // or rgb2hsv([r,g,b]); + - var rgb = hsv2rgb(h,s,v); // or hsv2rgb([h,​s,​v]); + ​ Line 88: 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.