[{"data":1,"prerenderedAt":168},["ShallowReactive",2],{"help-article-\u002Fhelp\u002Fdesign-elements\u002Fcolor-property":3},{"id":4,"title":5,"body":6,"category":155,"description":156,"extension":157,"keywords":158,"meta":159,"navigation":162,"order":163,"path":164,"seo":165,"stem":166,"updated":163,"__hash__":167},"help\u002Fhelp\u002Fdesign-elements\u002Fcolor-property.md","Color property",{"type":7,"value":8,"toc":141},"minimark",[9,12,17,21,28,30,34,37,42,44,48,51,56,58,62,65,70,75,78,83,87,90,95,99,102,107,110,115,119,122,127,129,133,136],[10,11],"hr",{},[13,14,16],"h2",{"id":15},"changing-an-objects-fill-color","Changing an object's fill color",[18,19,20],"p",{},"To change an object's fill color, select the object > go to the Colors tab of the Properties panel (third tab) > click on the colored box under the \"Fill Color\" property to easily edit the color.",[18,22,23],{},[24,25],"img",{"alt":26,"src":27},"","https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f666075c32415015f472ea\u002Ffile-FIOzRQMuSH.jpg",[10,29],{},[13,31,33],{"id":32},"hex-hsl-rgb","HEX, HSL & RGB",[18,35,36],{},"The Color property supports HEX codes, HSL, and RGB values. In the color picker popover menu, click on the value mode in the bottom-left corner to toggle the mode.",[18,38,39],{},[24,40],{"alt":26,"src":41},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f6666c3040c32df5604133\u002Ffile-ziVYCjTZ3D.jpg",[10,43],{},[13,45,47],{"id":46},"fill-color-of-image-objects","Fill color of image objects",[18,49,50],{},"Image objects have a Fill Color property as well, but the default value is 'none'. If you set a specific fill color, all pixels will have that color while still respecting their original opacity.",[18,52,53],{},[24,54],{"alt":26,"src":55},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f6672ad82c2850abbd3383\u002Ffile-D06iwJdADA.jpg",[10,57],{},[13,59,61],{"id":60},"color-gradient","Color gradient",[18,63,64],{},"Shape objects can have a gradient. The Fill mode can be toggled by clicking on \"Gradient\".",[18,66,67],{},[24,68],{"alt":26,"src":69},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f667b85ac8a946b29a6817\u002Ffile-Rgv6S4jKLj.jpg",[71,72,74],"h3",{"id":73},"angle","Angle",[18,76,77],{},"Rotate the gradient by editing the Angle property.",[18,79,80],{},[24,81],{"alt":26,"src":82},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f66845b48ee101620b3414\u002Ffile-4ywls2zfnZ.jpg",[71,84,86],{"id":85},"color-steps","Color Steps",[18,88,89],{},"Click on the colored box under \"Color Steps\" to open a popover menu where you can edit, add, and delete the color steps of your gradient.",[18,91,92],{},[24,93],{"alt":26,"src":94},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f66896d82c2850abbd3390\u002Ffile-Z2qOD46FWU.jpg",[71,96,98],{"id":97},"radial-gradient","Radial gradient",[18,100,101],{},"You can select a radial gradient from the \"Type\" dropdown menu.",[18,103,104],{},[24,105],{"alt":26,"src":106},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f668d95ac8a946b29a681d\u002Ffile-TPueO8X30P.jpg",[18,108,109],{},"Radial gradients have an X and a Y property, which set the gradient's origin relative to the object's bounding box. For \"X,\" the left edge corresponds to -1 and the right edge to 1. For \"Y,\" the top edge corresponds to -1 and the bottom edge to 1.",[18,111,112],{},[24,113],{"alt":26,"src":114},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f668ee3040c32df5604144\u002Ffile-gQt76Y8AKq.jpg",[71,116,118],{"id":117},"conic-gradiant","Conic gradiant",[18,120,121],{},"You can select a conic gradient from the \"Type\" dropdown menu.",[18,123,124],{},[24,125],{"alt":26,"src":126},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f66984d82c2850abbd3395\u002Ffile-LOdnFeROQH.jpg",[10,128],{},[13,130,132],{"id":131},"stroke","Stroke",[18,134,135],{},"You can add a stroke to an object by setting the stroke width.",[18,137,138],{},[24,139],{"alt":26,"src":140},"https:\u002F\u002Fd33v4339jhl8k0.cloudfront.net\u002Fdocs\u002Fassets\u002F66a2680eebb98e6cfc598655\u002Fimages\u002F67f669afd60b094a5616dad6\u002Ffile-HzuYyxTa7g.jpg",{"title":26,"searchDepth":142,"depth":142,"links":143},2,[144,145,146,147,154],{"id":15,"depth":142,"text":16},{"id":32,"depth":142,"text":33},{"id":46,"depth":142,"text":47},{"id":60,"depth":142,"text":61,"children":148},[149,151,152,153],{"id":73,"depth":150,"text":74},3,{"id":85,"depth":150,"text":86},{"id":97,"depth":150,"text":98},{"id":117,"depth":150,"text":118},{"id":131,"depth":142,"text":132},"design-elements","Apply solid fills, transparency, and color picker controls to any object that supports a color.","md",[],{"helpscout_id":160,"helpscout_url":161},110,"https:\u002F\u002Flearn.bluepic.io\u002Farticle\u002F110-color-property",true,null,"\u002Fhelp\u002Fdesign-elements\u002Fcolor-property",{"title":5,"description":156},"help\u002Fdesign-elements\u002Fcolor-property","yExA2NA0omRbNYVj5PWiGaQvGhFrlt418MqWtoEWqxk",1779983065944]