How do I pass the value from the color picker

Hi! I’m building a “section” component which has a background color schema (using the storyblok-colorpicker plugin). I’m trying to do something like this which I know is invalid:

const Section = (props) => (

<div className=“page-section” style={{
backgroundColor: {props.blok.backgroundColor}
}} >


Could you please let me know how I could use the value from the color picker plugin properly? Thanks! Just started using Storyblok this week - this is pretty cool stuff!


all you need to do is define one of your fields as Plugin and Type “native-color-picker”. Check out the image :arrow_heading_down:

After that you will be able to choose the color in the content tab on your story/component. Like this :arrow_heading_down:

and then get the data thourgh the JSON into your application :smirk:

In my case I called my field “color_picker” and there I will find the selected color under “color” property.


Thank you, Samuel! I’ll give that a try :grinning: