React.js Blueprint Colors 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 Colors 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.

Blueprint Colors Schemes:

• Sequential color schemes: This color scheme is best suited for representing data that ranges from low-to-high values either on an ordinal or on a numerical scale.
• Diverging color schemes: This color scheme put equal weightage on the mid-range and extreme values at both ends of the data range.
• Qualitative color schemes: This color scheme uses a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.

Syntax:

<div style={{ backgroundColor: "#2D72D2" }}>...</div>
<h3 style={{ color: "#77450D" }}>...</h3>

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 the Sequential Color Scheme.

Javascript

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 Colors Color schemes</h1>
            </div>
            <div>
                <h2 style={{ textAlign: "center",
                    color: "green" }}>
                    Sequential Color Scheme
                </h2>
                <div style={{ padding: 20, display: "flex",
                    flexDirection: "row" }}>
                    <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: "#97F3EB",
                            padding: 20 }}>
                            #CFF3D2
                        </div>
                        <div style={{ backgroundColor: "#78D5CC",
                            padding: 20 }}>
                            #8BCDBC
                        </div>
                        <div style={{ backgroundColor: "#58B8AE",
                            padding: 20 }}>
                            #59A3AC
                        </div>
                        <div style={{ backgroundColor: "#369C91",
                            padding: 20 }}>
                            #3878A1
                        </div>
                        <div style={{ backgroundColor: "#008075",
                            padding: 20 }}>
                            #1F4B99
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of the Diverging Color Scheme.

Javascript

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 Colors Color schemes</h1>
            </div>
            <div>
                <h2 style={{ textAlign: "center", color: "green" }}>
                    Diverging Color Scheme
                </h2>
                <div style={{
                    padding: 20, display: "flex",
                    flexDirection: "row"
                }}>
                    <div style={{
                        display: 'flex', flexDirection: 'column',
                        paddingRight: 10
                    }}>
                        <div style={{
                            backgroundColor: '#1F4B99',
                            padding: 20,
                            color: 'white'
                        }}>
                            #1F4B99
                        </div>
                        <div style={{
                            backgroundColor: '#6CACB9', padding: 20,
                            color: 'white'
                        }}>
                            #6CACB9
                        </div>
                        <div style={{
                            backgroundColor: '#FFFFFF', padding: 20,
                            color: 'black'
                        }}>
                            #FFFFFF
                        </div>
                        <div style={{
                            backgroundColor: '#DF9563', padding: 20,
                            color: 'white'
                        }}>
                            #DF9563
                        </div>
                        <div style={{
                            backgroundColor: '#9E2B0E', padding: 20,
                            color: 'white'
                        }}>
                            #9E2B0E
                        </div>
                    </div>
                    <div style={{
                        display: 'flex', flexDirection:
                            'column', paddingRight: 10
                    }}>
                        <div style={{
                            backgroundColor: '#1D7324',
                            padding: 20, color: 'white'
                        }}>
                            #1D7324
                        </div>
                        <div style={{
                            backgroundColor: '#8BAE44',
                            padding: 20, color: 'white'
                        }}>
                            #8BAE44
                        </div>
                        <div style={{
                            backgroundColor: '#FFE39F',
                            padding: 20, color: 'white'
                        }}>
                            #FFE39F
                        </div>
                        <div style={{
                            backgroundColor: '#6B9FA1',
                            padding: 20, color: 'white'
                        }}>
                            #6B9FA1
                        </div>
                        <div style={{
                            backgroundColor: '#1F4B99',
                            padding: 20, color: 'white'
                        }}>
                            #1F4B99
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

export default App;

Output:

Example 3: Below example demonstrates the usage of the Qualitative Color Scheme.

Javascript

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 Colors Color schemes</h1>
            </div>
            <div>
                <h2 style={{ textAlign: "center", color: "green" }}>
                    Qualitative Color Scheme
                </h2>
                <div style={{ padding: 20, display: "flex",
                    flexDirection: "row" }}>
                    <div
                        style={{ backgroundColor: "#147EB3",
                        padding: 20, color: "white" }}
                    >
                        #147EB3
                    </div>
                    <div
                        style={{ backgroundColor: "#29A634",
                        padding: 20, color: "white" }}
                    >
                        #147EB3
                    </div>
                    <div
                        style={{ backgroundColor: "#D1980B",
                        padding: 20, color: "white" }}
                    >
                        #D1980B
                    </div>
                    <div
                        style={{ backgroundColor: "#D33D17",
                        padding: 20, color: "white" }}
                    >
                        #D33D17
                    </div>
                    <div
                        style={{ backgroundColor: "#9D3F9D",
                        padding: 20, color: "white" }}
                    >
                        #9D3F9D
                    </div>
                </div>
            </div>
        </>
    );
}

export default App;

Output:

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