Open In App

React.js Blueprint Colors Qualitative Color Schemes

Improve
Improve
Like Article
Like
Save
Share
Report

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 Qualitative 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 qualitative color schemes use a series of unrelated colors to make a scheme that does not imply order, merely a difference in kind.

Syntax:

<h1 style={{color: "#147EB3" 
    | "#29A634" | "#D1980B" | "#D33D17"}}>
    ...
</h1>
<p style={{color: "#9D3F9D" | "#00A396" | "#DB2C6F" | 
    "#8EB125" | "#946638" | "#7961DB"}}>
    ...
</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:

 

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

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 Qualitative Color Schemes
            </h1>
            <div style={{ display: 'flex' }}>
                <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 style={{ backgroundColor: '#00A396'
                    padding: 20, color: 'white' }}>
                        #00A396
                </div>
                <div style={{ backgroundColor: '#DB2C6F'
                    padding: 20, color: 'white' }}>
                        #DB2C6F
                </div>
                <div style={{ backgroundColor: '#8EB125'
                    padding: 20, color: 'white' }}>
                        #8EB125
                </div>
                <div style={{ backgroundColor: '#946638'
                    padding: 20, color: 'white' }}>
                        #946638
                </div>
                <div style={{ backgroundColor: '#7961DB'
                    padding: 20, color: 'white' }}>
                        #7961DB
                </div>
            </div>
        </div>
    );
}
  
export default App;


Output:

 

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

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 Qualitative
                Color Schemes
            </h1>
            <div>
                <h1 style={{ color: '#147EB3' }}>#147EB3</h1>
                <h2 style={{ color: '#29A634' }}>#147EB3</h2>
                <h3 style={{ color: '#D1980B' }}>#D1980B</h3>
                <h4 style={{ color: '#D33D17' }}>#D33D17</h4>
                <h5 style={{ color: '#9D3F9D' }}>#9D3F9D</h5>
                <h6 style={{ color: '#00A396' }}>#00A396</h6>
            </div>
        </div>
    );
}
  
export default App;


Output:

 

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



Last Updated : 15 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads