React.js Blueprint Colors Sequential Color Schemes

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Sequential Color Schemes. Colors are a very important component used in styling a web application. The React.js Blueprint provides different types of color schemes that can be used while styling a web application. The BluePrint sequential color schemes are best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.

React.Js BluePrint Colors Sequential Color Schemes:

• Single hue: This sequential color scheme lets the user use only a single type of color using a numerical value.
• Multi hue: This sequential color scheme is used where there is a need to add multi-hue colors using different numerical values.

Syntax:

<div style={{ backgroundColor: "#97F3EB" | "#78D5CC" 
    | "#58B8AE" | "#369C91" | "#008075" }}>
    ...
</div>

<div style={{ backgroundColor: "#CFF3D2" | "#8BCDBC" 
    | "#59A3AC" | "#3878A1" | "#1F4B99" }}>
    ...
</div>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

Example 1: Below example demonstrates the usage of single hue sequential color schemes.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <>
            <div style={{
                padding: 20, textAlign: "center",
                color: "green"
            }}>
                <h1>
                    ReactJS BluePrint Sequential color schemes
                </h1>
            </div>
            <div>
                <div style={{
                    padding: 20, display: "flex",
                    flexDirection: "row"
                }}>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#FFC940",
                            padding: 20
                        }}>
                            #FFC940
                        </div>
                        <div style={{
                            backgroundColor: "#E9A133",
                            padding: 20
                        }}>
                            #E9A133
                        </div>
                        <div style={{
                            backgroundColor: "#D27B27",
                            padding: 20
                        }}>
                            #D27B27
                        </div>
                        <div style={{
                            backgroundColor: "#B9541A",
                            padding: 20
                        }}>
                            #B9541A
                        </div>
                        <div style={{
                            backgroundColor: "#9E2B0E",
                            padding: 20
                        }}>
                            #9E2B0E
                        </div>
                    </div>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#FFEEC5",
                            padding: 20
                        }}>
                            #FFEEC5
                        </div>
                        <div style={{
                            backgroundColor: "#F1AEA4",
                            padding: 20
                        }}>
                            #F1AEA4
                        </div>
                        <div style={{
                            backgroundColor: "#D37387",
                            padding: 20
                        }}>
                            #D37387
                        </div>
                        <div style={{
                            backgroundColor: "#A3416E",
                            padding: 20
                        }}>
                            #A3416E
                        </div>
                        <div style={{
                            backgroundColor: "#5C255C",
                            padding: 20
                        }}>
                            #5C255C
                        </div>
                    </div>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#CFF3D2",
                            padding: 20
                        }}>
                            #CFF3D2
                        </div>
                        <div style={{
                            backgroundColor: "#8BCDBC",
                            padding: 20
                        }}>
                            #8BCDBC
                        </div>
                        <div style={{
                            backgroundColor: "#59A3AC",
                            padding: 20
                        }}>
                            #59A3AC
                        </div>
                        <div style={{
                            backgroundColor: "#3878A1",
                            padding: 20
                        }}>
                            #3878A1
                        </div>
                        <div style={{
                            backgroundColor: "#1F4B99",
                            padding: 20
                        }}>
                            #1F4B99
                        </div>
                    </div>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#E1BAE1",
                            padding: 20
                        }}>
                            #E1BAE1
                        </div>
                        <div style={{
                            backgroundColor: "#DD86AF",
                            padding: 20
                        }}>
                            #DD86AF
                        </div>
                        <div style={{
                            backgroundColor: "#C35989",
                            padding: 20
                        }}>
                            #C35989
                        </div>
                        <div style={{
                            backgroundColor: "#98366D",
                            padding: 20
                        }}>
                            #98366D
                        </div>
                        <div style={{
                            backgroundColor: "#5C255C",
                            padding: 20
                        }}>
                            #5C255C
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of multi-hue sequential color schemes.

App.js

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";

function App() {
    return (
        <>
            <div style={{
                padding: 20,
                textAlign: "center", color: "green"
            }}>
                <h1>
                    ReactJS BluePrint Sequential color schemes
                </h1>
            </div>
            <div>
                <div style={{
                    padding: 20, display: "flex",
                    flexDirection: "row"
                }}>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#FFC940",
                            padding: 20
                        }}>
                            #FFC940
                        </div>
                        <div style={{
                            backgroundColor: "#E9A133",
                            padding: 20
                        }}>
                            #E9A133
                        </div>
                        <div style={{
                            backgroundColor: "#D27B27",
                            padding: 20
                        }}>
                            #D27B27
                        </div>
                        <div style={{
                            backgroundColor: "#B9541A",
                            padding: 20
                        }}>
                            #B9541A
                        </div>
                        <div style={{
                            backgroundColor: "#9E2B0E",
                            padding: 20
                        }}>
                            #9E2B0E
                        </div>
                    </div>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#FFEEC5",
                            padding: 20
                        }}>
                            #FFEEC5
                        </div>
                        <div style={{
                            backgroundColor: "#F1AEA4",
                            padding: 20
                        }}>
                            #F1AEA4
                        </div>
                        <div style={{
                            backgroundColor: "#D37387",
                            padding: 20
                        }}>
                            #D37387
                        </div>
                        <div style={{
                            backgroundColor: "#A3416E",
                            padding: 20
                        }}>
                            #A3416E
                        </div>
                        <div style={{
                            backgroundColor: "#5C255C",
                            padding: 20
                        }}>
                            #5C255C
                        </div>
                    </div>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#CFF3D2",
                            padding: 20
                        }}>
                            #CFF3D2
                        </div>
                        <div style={{
                            backgroundColor: "#8BCDBC",
                            padding: 20
                        }}>
                            #8BCDBC
                        </div>
                        <div style={{
                            backgroundColor: "#59A3AC",
                            padding: 20
                        }}>
                            #59A3AC
                        </div>
                        <div style={{
                            backgroundColor: "#3878A1",
                            padding: 20
                        }}>
                            #3878A1
                        </div>
                        <div style={{
                            backgroundColor: "#1F4B99",
                            padding: 20
                        }}>
                            #1F4B99
                        </div>
                    </div>
                    <div style={{ padding: 10 }}>
                        <div style={{
                            backgroundColor: "#E1BAE1",
                            padding: 20
                        }}>
                            #E1BAE1
                        </div>
                        <div style={{
                            backgroundColor: "#DD86AF",
                            padding: 20
                        }}>
                            #DD86AF
                        </div>
                        <div style={{
                            backgroundColor: "#C35989",
                            padding: 20
                        }}>
                            #C35989
                        </div>
                        <div style={{
                            backgroundColor: "#98366D",
                            padding: 20
                        }}>
                            #98366D
                        </div>
                        <div style={{
                            backgroundColor: "#5C255C",
                            padding: 20
                        }}>
                            #5C255C
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/colors.sequential-color-schemes