User Tools


Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
design_guide_color [2018/03/21 02:15]
z3dev
design_guide_color [2018/06/12 14:27] (current)
z3dev
Line 6: Line 6:
  
 <code javascript>​ <code javascript>​
-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))
 </​code>​ </​code>​
  
-Color names 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'​.
  
 The CSG library functions can also be used. //NOTE: Deprecated in the V2 API// The CSG library functions can also be used. //NOTE: Deprecated in the V2 API//
  
 <code javascript>​ <code javascript>​
-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])
 </​code>​ </​code>​
  
-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.//
- +
-See the [https://www.w3.org/​TR/​css3-color/#​svg-color Extended Color Keywords] for all available colors. +
- +
-Note: There are some Transparency_Sorting|OpenGL Transparency Limitationse.g. and depending on the order of colors, ​you might not see through otherwise partially ​transparent ​objects.+
  
 === Color Space Conversion === === Color Space Conversion ===
Line 32: Line 28:
  
 <code javascript>​ <code javascript>​
-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)
 </​code>​ </​code>​
  
Line 43: 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.