React.js Blueprint Colors Diverging 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. This is not a mobile-first UI toolkit.

In this article, we’ll discuss React.js Blueprint Colors Diverging 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 diverging color scheme put equal weightage on the mid-range and extreme values at both ends of the data range.

Diverging color schemes class: As these are color schemes, so there is a combination of different colors which can range from a diverging of 3 to about 20 different colors, and also there is no specific class available for using them. To use the diverging color scheme, we use them by adding in the style attribute of tags or elements. 

Syntax:

<h1 style={{color: "#HexCode"}}>
     ...
</h1>
<p style={{color: "#HexCode"}}>
     ...
</p>

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: The project should look like the below:

Example 1: Below example demonstrates the usage of Qualitative Color Schemes as the background color.

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 Colors Diverging Color Schemes
            </h1>
            <div style={{
                display: 'flex', flexDirection: 'row',
                paddingRight: 10
            }}>
                <div style={{
                    display: 'flex', flexDirection: 'column',
                    paddingRight: 10
                }}>
                    <div style={{
                        backgroundColor: '#1F4B99',
                        padding: 20, color: 'white'
                    }}>
                        #1F4B99
                    </div>
                    <div style={{
                        backgroundColor: '#6B9FA1',
                        padding: 20, color: 'white'
                    }}>
                        #6B9FA1
                    </div>
                    <div style={{
                        backgroundColor: '#FFE39F',
                        padding: 20, color: 'white'
                    }}>
                        #FFE39F
                    </div>
                    <div style={{
                        backgroundColor: '#D78742',
                        padding: 20, color: 'white'
                    }}>
                        #D78742
                    </div>
                    <div style={{
                        backgroundColor: '#9E2B0E',
                        padding: 20, color: 'white'
                    }}>
                        #9E2B0E
                    </div>
                </div>
                <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 style={{ display: 'flex',
                    flexDirection: 'column' }}>
                    <div style={{
                        backgroundColor: '#1D7324',
                        padding: 20, color: 'white'
                    }}>
                        #1D7324
                    </div>
                    <div style={{
                        backgroundColor: '#96BA61',
                        padding: 20, color: 'white'
                    }}>
                        #96BA61
                    </div>
                    <div style={{
                        backgroundColor: '#FFFFFF',
                        padding: 20, color: 'black'
                    }}>
                        #FFFFFF
                    </div>
                    <div style={{
                        backgroundColor: '#6CACB9',
                        padding: 20, color: 'white'
                    }}>
                        #6CACB9
                    </div>
                    <div style={{
                        backgroundColor: '#1F4B99',
                        padding: 20, color: 'white'
                    }}>
                        #1F4B99
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the usage of Qualitative Color Schemes as the text typography color.

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 Colors Diverging Color Schemes
            </h1>
            <div>
                <div style={{
                    display: "flex",
                    flexDirection: "column"
                }}>
                    <h1 style={{ color: "#1F4B99" }}>#1F4B99</h1>
                    <h2 style={{ color: "#6B9FA1" }}>#6B9FA1</h2>
                    <h3 style={{ color: "#FFE39F" }}>#FFE39F</h3>
                    <h4 style={{ color: "#D78742" }}>#D78742</h4>
                    <h5 style={{ color: "#9E2B0E" }}>#9E2B0E</h5>
                </div>
            </div>
        </div>
    );
}

export default App;

Output:

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